Question

我一直试图使我的Bootstrap列的大小相同而且一直在失败。使用CSS或JavaScript，我该如何实现？

Example

CSS：

#grid-selector .container {
    max-width: 400px;
}

#grid-selector [class*="col-"] {
    border: 1px solid #000;
    text-align: center;
    padding: 20px;
}

HTML：

<div id="grid-selector">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">Section 1<br>Space</div>
      <div class="col-xs-6">Section 2</div>
    </div>
    <div class="row">
      <div class="col-xs-6">Section 3</div>
      <div class="col-xs-6">Section 4</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Section 5</div>
      <div class="col-xs-3">Section 6</div>
      <div class="col-xs-6">Section 7</div>
    </div>
    <div class="row">
      <div class="col-xs-6">
        <div class="row man">
          <div class="col-xs-12">Section 8</div>
        </div>
        <div class="row man">
          <div class="col-xs-12">Section 9</div>
        </div>
      </div>
      <div class="col-xs-6">Section 10</div>
    </div>
    <div class="row">
      <div class="col-xs-12">Section 11</div>
    </div>
  </div>
</div>

Answer 1

tadaaa！超级FLEX救援！

#grid-selector .container {
}
#grid-selector .row {
    display:flex;
    align-items:stretch !important;
}
#grid-selector [class*="col-"] {
    border: 1px solid #000;
    text-align: center;
    padding: 20px;
    min-height:100%;
}

我甚至让你的例子完全响应而不是固定宽度，因为我可以;）。

不，真的，我这样做是为了向您展示它可以很容易地响应，但是如果您想要修复它，只需将所有这些代码添加到容器div中（执行 NOT 限制容器宽度和你一样！）

看到以视觉方式理解http://www.bootply.com/Wypyz5PaSN并玩弄

并在Mozilla MDN上阅读有关 FLEX MODEL 的更多信息

CSS3 Flexible Box或flexbox 是一种布局模式，用于在页面上排列元素，以便元素   当页面布局必须适应不同时，表现可预测   屏幕尺寸和不同的显示设备。对于许多应用程序，   灵活的盒子模型提供了对块模型的改进   它不使用浮动，也不使用Flex容器的边距   崩溃与其内容的边缘。

许多设计师会发现Flexbox模型更易于使用。 Flexbox中的子元素可以在任何方向布局并且可以具有   灵活的尺寸，以适应展示空间。 定位孩子   因此，元素更容易，并且可以更多地实现复杂的布局   简单而干净的代码，因为元素的显示顺序是   独立于源代码中的顺序。这种独立性   故意只影响视觉渲染，留下语音顺序   和基于源订单的导航。

Answer 2

最简单的方法是创建一个额外的CSS类，在每行的列之间共享。

在本课程中，您需要定义最小高度。

<div class="container">
    <div class="row">
        <div class="col-xs-6 row1">Section 1<br>Space</div>
        <div class="col-xs-6 row1">Section 2</div>
    </div>
</div>

然后，您将按如下方式定义CSS

.row1{
    min-height: 100px;
}

您希望使用最小高度而不是高度的原因是在缩小窗口大小时保持响应性。如果你那时只做高度，而不是最小高度，一旦站点变小，对象就不能放入div中，并且不能正常运行。

甚至是Bootstrap网格中的列

2 个答案: