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

时间：2015-07-03 08:55:17

标签： html css twitter-bootstrap

我想使用bootstrap网格系统生成一个表。我创建的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。

1 个答案:

答案 0 :(得分：0)

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

因此，您有几个选择：

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

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

https://jsfiddle.net/4sxogckb/

但由于你无法读取数据，这有点毫无意义。

接下来，您可以强制删除长词：

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

https://jsfiddle.net/8swd3km5/

然而这很难看。

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

相关问题
最新问题