我正在使用Bootstrap。如何让三根柱子都一样高呢?

下面是问题的截图。我希望蓝色和红色的列和黄色的列一样高。

代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-4 panel" style="background-color: red"> some content </div> <div class="col-xs-4 panel" style="background-color: yellow"> catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> </div> <div class="col-xs-4 panel" style="background-color: blue"> some more content </div> </div> </div>


当前回答

来自官方文件。也许你可以用在你的案子上。

当你需要等高时,在卡片上加上。h-100。

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>
  <div class="col">
   <div class="card h-100">
     <div>.....</div>
  </div>

其他回答

所以,是的,Bootstrap 4确实使一行中所有的cols高度相等,然而,如果你在一行内的内容周围创建边框,你可能会发现它看起来像cols不等高!

当我对col内的元素应用height: 100%时,我发现我失去了边缘。

我的解决方案是在col的div上使用填充(而不是在内部元素上使用边缘)。像这样:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

上面的代码示例使用Bootstrap 4.1创建一组带有边框的9个方框

更新2021

引导 4 + 5

Flexbox现在在Bootstrap 4(和Bootstrap 5)中默认使用,因此不需要额外的CSS来创建等高列:https://www.codeply.com/go/IJYRI4LPwU

例子:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

引导3

引导3的最佳方法。x -使用CSS flexbox(需要最小的CSS)…

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap相同高度flexbox的例子

若要仅在特定断点(响应式)应用相同高度的flexbox,请使用媒体查询。例如,这里是sm (768px)及以上:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

此解决方案也适用于多行(列换行):https://www.codeply.com/go/bp/gCEXzPMehZ

其他解决方法

其他人会推荐这些选项,但对于响应式设计来说并不是一个好主意。这些只适用于简单的单行布局,没有列换行。

使用巨大的负边距和填充 使用display:table-cell(此解决方案也会影响响应网格,因此可以使用@media查询仅在列垂直堆叠之前在更宽的屏幕上应用表显示)

试着用弹性盒来做

.container { 显示:flex; padding-bottom: 50 px; } .col { 背景:蓝色; 填充:30 px; } .col。中心{ 背景:红色; 身高:100 px; margin-bottom: -50 px; } < div class = "容器" > < div class = "坳“> < / div > <div class="col center"> center </div> . < div class = "坳“> < / div > < / div >

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

例子:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

这里改编自几个答案。一旦IE8和ie9被淘汰,一旦Android 2被淘汰,基于flexbox的答案就是正确的方法。X已经死了,但在2015年并不是这样,在2016年也不会。IE8和ie9的使用率仍占4-6%,这取决于你如何衡量,对于许多企业用户来说,情况要糟糕得多。http://caniuse.com/#feat=flexbox

display: table, display: table-cell的技巧是向后兼容的,一个很棒的事情是唯一严重的兼容性问题是Safari的问题,它强制box-sizing: border-box,这已经应用到Bootstrap标签上了。http://caniuse.com/#feat=css-table

显然,您可以添加更多做类似事情的类,如.equal-height-md。我将这些标记与div绑定在一起,以便在受限制的使用中获得较小的性能收益,但您可以删除标记,使其像Bootstrap的其余部分一样更通用。

注意,这里的jsfiddle使用CSS,因此,Less将提供的内容硬编码在链接的示例中。例如@screen-sm-min已经被Less插入的- 768px所取代。

我想我只是补充一下,Dr.Flink给出的答案也可以应用到Bootstrap 3表单水平块——如果你想为每个单元格使用背景色,这是非常方便的。为了使这适用于引导表单,您需要包装表单内容,这只是为了复制一个类似表格的结构。

下面的例子还提供了CSS,它演示了一个额外的媒体查询允许Bootstrap 3简单地接管并在较小的屏幕上做正常的事情。这也适用于IE8+。

例子:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}