html - 使用 Bootstrap 网格创建表时出现问题

标签 html css twitter-bootstrap

我想使用 Bootstrap 网格系统生成一个表。下面是我创建的用于生成表格的 html 代码，但它无法正常工作，因为表格单元格在 768 像素的屏幕尺寸下重叠。

.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>

此代码在桌面上运行良好，问题在于 768 像素的屏幕尺寸。

最佳答案

我同意你使用 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 列表。

关于html - 使用 Bootstrap 网格创建表时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31202594/

上一篇：ios - 正向域未在具有响应模板的 iphone 中呈现

下一篇：html - 使用纯 CSS3/HTML5 的基于 Web 的数据可视化？

相关文章：

html - 如何使用我的侧边栏将其他元素推到右边？

javascript - 如何在对象原型(prototype)中设置多个函数

css - Bootstrap 容器用颜色填充边

php - Switch/Case 生成 URL 导致空格

javascript - 允许 div 滚动 x 量然后停止？

javascript - 你怎么称呼这个错误，它是 CSS、JS、库错误吗？

html - 将任何特定的 div 放在 body 中，就像 Bootstrap 模式一样

html - 使用 Bootstrap 导航栏复制 github 的顶部栏行为？

html - 使我的图像全宽

css - 内联 Kendo UI 编辑器 div 中的样式元素不起作用

©2024 IT工具网  联系我们