使用引导网格创建表格中的问题

我想使用引导网格系统生成表格。在我创建的用于生成表格的html代码之下，但它不能正常工作，因为表格单元格在768px的屏幕尺寸上重叠。使用引导网格创建表格中的问题

.row.header { 
 
    height: 44px; 
 
    border-top: 1px solid #CCCCCC; 
 
    border-top-right-radius: 5px; 
 
    border-top-left-radius: 5px; 
 
    background-color: #F3F3F3; 
 
} 
 
p.block-space { 
 
    margin: 15px 0 16px 0px; 
 
} 
 
div[class^="col"] > label { 
 
    margin: 15px 0 16px 0px; 
 
    text-align: center; 
 
    font: normal 14px Helvetica; 
 
    color: #666666; 
 
} 
 
.col-margin-header { 
 
    margin-left: 10px !important; 
 
} 
 
.col-margin { 
 
    margin-left: 15px !important; 
 
} 
 
.xs-col-margin { 
 
    margin-left: 5px !important; 
 
} 
 
dt.heading { 
 
    font: bold 14px Helvetica; 
 
    text-align: left; 
 
    color: #333333; 
 
} 
 
.dd-description { 
 
    font: normal 14px Helvetica; 
 
    color: #666666; 
 
} 
 
@media (min-width: 320px) { 
 
    div[class^="col"] { 
 
    padding-left: 2px; 
 
    padding-right: 2px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
@media (min-width: 768px) { 
 
    div[class^="col"] { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
/* Medium devices (desktops, 992px and up) */ 
 

 
@media (min-width: 992px) { 
 
    div[class^="col"] { 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
} 
 
/* Large devices (large desktops, 1200px and up) */ 
 

 
@media (min-width: 1200px) { 
 
    /*default so you don't need this*/ 
 
    div[class^="col"] { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    } 
 
    .row { 
 
    background: #fff; 
 
    border-left: 1px solid #CCCCCC; 
 
    border-right: 1px solid #CCCCCC; 
 
    border-bottom: 1px solid #CCCCCC; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Example of Bootstrap 3 Grid System</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <br/> 
 
    <br/> 
 
    <div class="row header visible-sm-block visible-md-block"> 
 
     <div class="col-sm-1 col-md-1"> 
 
     <label class="col-margin-header">Select</label> 
 
     </div> 
 
     <div class="col-sm-11 col-md-11"> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Bank</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Agent</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Company</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Division</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Department</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Bank</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Agent</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Company</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Division</label> 
 
     </div> 
 
     <div class="col-sm-1 col-md-1"> 
 
      <label>Department</label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-1 col-sm-1 col-md-1"> 
 
     <p class="block-space col-margin visible-sm-block visible-md-block"> 
 
      <input type="radio" /> 
 
     </p> 
 
     <p class="block-space xs-col-margin visible-xs-block"> 
 
      <input type="radio" /> 
 
     </p> 
 
     </div> 
 
     <div class="col-xs-11 col-sm-11 col-md-11"> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Bank</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Agent</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Company</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Division</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Department</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Bank</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Agent</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Company</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Division</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     <div class="col-xs-4 col-sm-1 col-md-1"> 
 
      <dl class="visible-xs-block"><dt class="heading">Department</dt> 
 
      <dd class="dd-description">Description goes here</dd> 
 
      </dl> 
 
      <p class="visible-sm-block visible-md-block">Description goes here</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

这个代码是台式机的问题是一个768px屏幕尺寸上workign罚款。

来源

2015-07-03 Smita Ture

“不能正常工作”是无意义的陈述。 *期望的*行为是什么，你取而代之的是什么*？ – Siguza

不工作意味着表格单元格重叠。 –

为什么不使用表格表 – albert

我同意你使用div作为布局，因为Bootstrap中的表是非常痛苦的。但是，我认为它的原因是重叠的，因为单元对于内容来说太小了。

你因此有几个选项：

首先是添加“溢出：隐藏;”到会隐藏额外的内容，但阻止它重叠列：

div[class^="col"] { 
    overflow:hidden; 
}

https://jsfiddle.net/4sxogckb/

但是，这是一种毫无意义的，因为你不能读取数据。

接下来，您可以强制长字打破：

div[class^="col"] { 
    word-break: break-all; 
}

https://jsfiddle.net/8swd3km5/

然而，这是相当丑陋。

最后，您最好的解决方案是重新审视设计，并尝试提出一种在小型屏蔽设备上显示不显示11列表格的数据的方法。

来源

2015-07-03 14:42:09

使用引导网格创建表格中的问题

回答

相关问题