用ChatGPT解决这个技术问题 Extra ChatGPT

如何使 Bootstrap 列的高度都相同？

我正在使用引导程序。如何使三列高度相同？

这是问题的屏幕截图。我希望蓝色和红色列与黄色列的高度相同。

https://i.stack.imgur.com/PLP7h.png

这是代码：

一些内容
catz
更多内容

stackoverflow.com/questions/24745966/…
bootstrap 网站上有一篇文章，有 5 行解决方案 getbootstrap.com.vn/examples/equal-height-columns
Bootstrap 上的示例破坏了 Eduard 的响应能力。 flex .row 缺少 flex-wrap: wrap;。下面是一个使用响应性的示例：codepen.io/bootstrapped/details/RrabNe
可能的解决方法 – 其他列中 1 像素宽的透明图像。这个新的一个像素宽度的图像与上例中猫图片的像素高度相匹配。 （在您的情况下可能不起作用或不实用）
在 Bootstrap 4 中，我们可以将卡用于相同的用途

P
Popnoodles

最新解决方案 (2022)

使用 Bootstrap 4 或 5 的解决方案 4

Bootstrap 4 和 5 默认使用 Flexbox，因此不需要额外的 CSS。

Demo 

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

使用负边距的解决方案 1（不会破坏响应能力）

Demo 

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

使用表格的解决方案 2

Demo 

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

使用 flex 的解决方案 3 于 2015 年 8 月添加。在此之前发布的评论不适用于此解决方案。

Demo 

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
把它想象成被吸进负空间的柱子。如果您删除溢出，您将看到发生了什么。
如果专门针对引导列类，您可能应该使用锚 ^ 而不是通配符 *。使用 ^ 将表示该类必须以 col- 开头，因为显示的通配符将匹配字符串中任何带有 col- 的类，可能会对您可能使用约定 col- 的样式产生不良影响。 （即 stuff-col-morestuff）。
很好的答案，有一些警告。解决方案 1 禁用浮动，因此会破坏引导网格响应行为。解决方案 2（在 positioniseverything.net/articles/onetruelayout/equalheight 中更深入地解释）不显示底部边框（因为它被剪裁在填充空间的某处）。
解决方案 3 破坏了行响应性。
@Popnoodles 您应该将 flex-wrap: wrap; 添加到第三个示例以启用响应性。您还需要添加 display: flex;弹性方向：列；到列类。如果您打算使用 .row 而不是自定义类，则需要为旧版浏览器提供后备以更改显示 flex。这是example
t
tagurit

2021 年更新

引导程序 4 + 5

现在在 Bootstrap 4（和 Bootstrap 5）中默认使用 Flexbox，因此不需要额外的 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

Bootstap 3.x 的最佳方法——使用 CSS flexbox（并且需要最少的 CSS）…… 

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

Bootstrap same height flexbox example

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

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

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

其他解决方法

其他人会推荐这些选项，但are not a good idea用于响应式设计。这些仅适用于没有列换行的简单单行布局。

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

您可以使用媒体查询仅在更大/更宽的设备上应用 flexbox。我更新了 bootply：bootply.com/Cn6fA6LuTq
如果有人感兴趣，我创建了 a pen 来演示使用 flexbox 在表单上的类似效果。
这是一个已知的带有 flexbox 的 Safari 错误：证明：bugs.webkit.org/show_bug.cgi?id=137730
@Stanley 关于“不再响应”的评论已经过时且无关紧要。
这是唯一对我有用的解决方法。谢谢Zim，这太棒了！
b
benomatis

不需要 JavaScript。只需将类 .row-eq-height 添加到您现有的 .row 中，如下所示： 

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

提示：如果您的行中有超过 12 列，则引导网格将无法包装它。因此，每 12 列添加一个新的 div.row.row-eq-height。

提示：您可能需要添加 

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

到你的 html

基于弹性盒。不适用于 IE8 或 9，也不适用于 Android 2.x caniuse.com/#feat=flexbox
注意：getbootstrap.vn 不是“引导程序”。这是一个 3rd 方项目。
不过，这似乎已集成在 bootstrap v4 中。
我包含了正确的 CSS（来自 .vn 站点），但它把一切都搞砸了。它基于 flex
太棒了...插件地狱。
E
Edric

要回答您的问题，这就是您所需要的see full responsive demo with prefixed css： 

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

https://i.stack.imgur.com/NOlns.png

要在 flex 列中添加对缩略图内容 flex 的支持，如上面的屏幕截图，还添加此...请注意，您也可以使用面板执行此操作： 

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

虽然 flexbox 在 IE9 及以下版本中不起作用，但您可以使用带有 javascript grids 之类的条件标签作为 polyfill 的后备演示： 

<!--[if lte IE 9]>

<![endif]-->

至于接受的答案中的其他两个示例......表格演示是一个不错的想法，但实施错误。在引导列类上应用该 CSS 毫无疑问会完全破坏网格框架。您应该为一个和两个表格样式使用自定义选择器，这些表格样式不应应用于已定义宽度的 [class*='col-']。仅当您想要等高和等宽列时才应使用此方法。它不适用于任何其他布局，也不是响应式的。我们可以让它在移动显示器上回退...... 

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>

@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

最后，在接受的答案中实现 one true layout 版本的第一个演示在某些情况下是一个不错的选择，但不适合引导列。这样做的原因是所有列都扩展到容器高度。因此，这也会破坏响应性，因为列不会扩展到它们旁边的元素，而是扩展到整个容器。此方法也不允许您再将底部边距应用于行，并且还会导致其他问题，例如滚动到锚标记。

有关完整代码，请参阅 Codepen，它会自动为 flexbox 代码添加前缀。

这是唯一对我有用的答案。 3 个评分最高的答案只是浪费时间
看起来不错，但不幸的是它在 MacOS 上的 Safari 9.1 中不起作用:-(
@TheSchecke 这里是修复。据我所知，这适用于所有支持 flexbox 的浏览器。如果我错了，请告诉我。 s.codepen.io/bootstrapped/debug/pboJNd。问题与 row:after, row:before 有 display: table set 显然 Safari 不喜欢有关。
只是提醒一下，这在 iPad 的 Safari 浏览器上非常糟糕
很抱歉听到@MatthewLock。我刚刚在我的 iPad Air IOS 8.1 上用最新的 safari 进行了测试，它可以正常工作。我还能够使用带有 Safari 7 的 iPad mini Retina 在 crossbrowsertesting.com 上进行测试，这似乎也可以正常工作。 Here's the results 该测试。能否提供您正在使用的 iPad 和 Safari 版本？我很想尽快解决这个问题，或者至少在答案中发表评论，因为我知道很多人都在使用它。
C
Coding Enthusiast

您只显示一行，因此您的用例可能仅限于此。以防万一您有多行，此插件 - github Javascript-grids - 完美运行！它使每个面板扩展到最高的面板，根据该行中最高的面板为每行提供不同的高度。这是一个 jquery 解决方案与 css，但想推荐它作为一种替代方法。

唯一真正有效且不会破坏响应能力的解决方案
这是否允许您指定列应该是方形的 - 或者只是所有相同的高度？
@niico 14 - 自从我使用它以来已经有一段时间了，但在我的应用程序中，要求是每行中的元素高度相同，但高度可能因行而异。由于高度是行中元素的函数，如果您的元素高度等于它们的宽度，那么它们应该呈现为正方形。
p
paulalexandru

如果您想在任何浏览器中使用此功能，请使用 javascript： 

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});
有一个 div class="row"，每个类“col-md-4”的面板数量可变，这应该给我 3 列和未知的行数，具体取决于我要列出的项目数。与我尝试过的各种 CSS 东西相比，这个 JS 可以工作，并且需要对我的 HTML/CSS 进行最小的更改。我唯一改变的是用附加类标记我的所有列面板，即“相同高度面板”，然后使用 $(".same-height-panel") 而不是 $(".panel")
经过一天的 css 实验后，唯一对我有用的解决方案。
这是一个很好的解决方案，但 .ready() 不是调用它的正确时间 - 它应该在 .load() 上调用
@jave.web 如果您认为这是一个很好的解决方案，请给它一个大拇指。谢谢
请改用 window.onload = function() {...function content above...}。这效果更好。
A
Adam Lindqvist

我尝试了很多在这个线程和其他页面上提出的建议，但没有一个解决方案在每个浏览器中都 100% 有效。

所以我尝试了很长时间并想出了这个。 Bootstrap Equal Height 列的完整解决方案，在 flexbox 的帮助下只有 1 个类。这适用于所有主流浏览器 IE10+。

CSS： 

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML： 

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

例如，要支持更多版本的 IE，您可以使用 https://github.com/liabru/jquery-match-height 并定位 .equal-cols 的所有子列。像这样： 

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

如果没有这个 polyfill，列的行为将与通常的 Bootstrap 列一样，因此这是一个很好的后备。

R
Ramazan

来自官方文档。也许你可以在你的情况下使用它。

当您需要相等的高度时，将 .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）
S
Steffan Perry

您也可以使用 inline-flex，它的效果非常好，并且可能比使用 CSS 修改每个行元素更简洁。

对于我的项目，我希望每一行子元素的边框都具有相同的高度，这样边框就会看起来参差不齐。为此，我创建了一个简单的 css 类。 

.row.borders{
    display: inline-flex;
    width: 100%;
}
虽然它成功地使行中的所有内容都具有相同的高度；这破坏了 Bootstrap 的响应能力。
e
eaglei22 
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

从：

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

B
BuffMcBigHuge

我很惊讶我在 2018 年末在这里找不到有价值的解决方案。我继续使用 flexbox 自己想出了一个 Bootstrap 3 解决方案。

干净简单的例子：

https://i.stack.imgur.com/M2be0.png

HTML 

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS 

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

查看工作演示：http://jsfiddle.net/5kmtfrny/

b
brooksrelyt

如果有人使用 bootstrap 4 并寻找相等高度的列，只需使用 row-eq-height 到父 div

.row.row-eq-height > .col-xs-4
.row.row-eq-height > .col-xs-4
这是
一个
比其他列
更高

.row.row-eq-height > .col-xs-4

参考：http://getbootstrap.com.vn/examples/equal-height-columns/

我认为这将是最好的答案
C
Chay22

如果有人感兴趣的话，厚颜无耻的 jquery 解决方案。只要确保你所有的 cols (el) 都有一个共同的类名......如果你将它绑定到 $(window).resize 也可以响应式工作 

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

用法 

$(document).ready(function(){
   equal_cols('.selector');
});

注意：此帖子已根据@Chris 的注释进行了编辑，指出代码仅在 $.each() 函数中设置了最后的最高高度

这是低调的 - 简单而小，但将调整所有列的大小，而无需在一行中有固定数量的列。好东西！
这不起作用，因为您在每个函数中设置了最后一个最大高度。如果第三列是最高列，则第 1 列和第 2 列的高度不正确。您必须设置最后一行“$(this).css({'height':h});”在每个函数之后。我会做一个编辑。
Z
Zachary Weixelbaum

之前的一些答案解释了如何使 div 具有相同的高度，但问题是当宽度太窄时，div 不会堆叠，因此您可以用一个额外的部分来实现他们的答案。对于每一个，除了你使用的行类之外，你还可以使用这里给出的 CSS 名称，所以如果你总是希望 div 彼此相邻，那么 div 应该如下所示： 

<div class="row row-eq-height-xs">Your Content Here</div>

对于所有屏幕： 

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

当你想使用 sm 时： 

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

当你想要 md 时： 

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

当你想使用 lg 时： 

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

编辑根据评论，确实有一个更简单的解决方案，但您需要确保为所有尺寸提供从最大所需宽度到 xs 的列信息（例如 <div class="col-md-3 col-sm-4 col-xs-12">： 

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
你做的比你需要的要复杂得多:)`只需使用 flex-wrap: wrap; 然后你就不需要所有单独的......除非你特别想要它们。
这在 iPad Safari 上失败
F
Faiz

我知道我已经很晚了，但现在您可以使用“最小高度”样式属性来实现您的目的。

D
Dagmar

所以是的，Bootstrap 4 确实使一行中的所有列的高度相等，但是如果您在行内的内容周围创建一个边框，您可能会发现它看起来好像列的高度不相等！

当我将 height: 100% 应用于 col 内的元素时，我发现我失去了边距。

我的解决方案是在 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 创建一组九个带边框的框

D
DarkScrolls 
.row.container-height {
    overflow: hidden;
}

.row.container-height>[class*="col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

其中 .container-height 是必须添加到其所有 .col* 子级具有相同高度的 .row 样式元素的样式类。

仅将这些样式应用于某些特定的 .row（使用 .container-height，如示例中所示）还可以避免将边距和填充溢出应用到所有 .col*。

t
tagurit

最好的：

反射 - 文档

与引导程序一起使用

更新：

包括 CSS 更新你的代码：

/*！ * * Reflex v1.0 * * Reflex 是一个 flexbox 网格，它提供了一种方法来利用新兴的 * flexbox 支持，同时在旧浏览器上提供回退到内联块 * * 由 Lee Jordan GCSE 构建 * 电子邮件：ldjordan@gmail .com * github: https://github.com/leejordan * * 结构和计算灵感来自 twitter bootstrap * */ .reflex-order-12 { -webkit-order: 12; -ms-flex-order：12；订单：12； } .reflex-order-11 { -webkit-order: 11; -ms-flex-order：11；订单：11； } .reflex-order-10 { -webkit-order: 10; -ms-flex-order：10；订购：10； } .reflex-order-9 { -webkit-order: 9; -ms-flex-order：9；订单：9； } .reflex-order-8 { -webkit-order: 8; -ms-flex-order：8；订单：8； } .reflex-order-7 { -webkit-order: 7; -ms-flex-order：7；订单：7； } .reflex-order-6 { -webkit-order: 6; -ms-flex-order：6；订单：6； } .reflex-order-5 { -webkit-order: 5; -ms-flex-order：5；订单：5； } .reflex-order-4 { -webkit-order: 4; -ms-flex-order：4；订单：4； } .reflex-order-3 { -webkit-order: 3; -ms-flex-order：3；订单：3； } .reflex-order-2 { -webkit-order: 2; -ms-flex-order：2；订单：2； } .reflex-order-1 { -webkit-order: 1; -ms-flex-order：1；订单：1； } .reflex-order-0 { -webkit-order: 0; -ms-flex-order：0；顺序：0； } .reflex-container { 显示：内联块；显示：-webkit-flex；显示：弯曲；缩放：1； *显示：内联；边距：0；填充：0；位置：相对；宽度：100%；字母间距：-0.31em； *字母间距：正常；字间距：-0.43em；列表样式类型：无； } .reflex-container *, .reflex-container:before, .reflex-container:after { -webkit-box-sizing:border-box; -moz-box-sizing：边框框； box-sizing：边框框；最大宽度：100%；字母间距：正常；字间距：正常；空白：正常； } .reflex-container *:before, .reflex-container *:after { -webkit-box-sizing:border-box; -moz-box-sizing：边框框； box-sizing：边框框； } [class*="reflex-col-"] { 宽度：100%;垂直对齐：顶部；位置：相对；显示：内联块；显示：-webkit-flex；显示：弯曲；缩放：1； *显示：内联；文本对齐：左；文本对齐：开始； } .reflex-item { 显示：块；显示：-webkit-flex；显示：弯曲； -webkit-flex-direction：列；弹性方向：列； -webkit-flex：1 1 自动；弹性：1 1 自动； } _:-ms-fullscreen, :root .reflex-item { 宽度: 100%; } .reflex-col-12 { 宽度：100%; *宽度：99.9%； } .reflex-col-11 { 宽度：91.66666666666666%; *宽度：91.56666666666666%； } .reflex-col-10 { 宽度：83.33333333333334%; *宽度：83.23333333333335%； } .reflex-col-9 { 宽度：75%; *宽度：74.9%； } .reflex-col-8 { 宽度：66.66666666666666%; *宽度：66.56666666666666%； } .reflex-col-7 { 宽度：58.333333333333336%; *宽度：58.233333333333334%； } .reflex-col-6 { 宽度：50%; *宽度：49.9%； } .reflex-col-5 { 宽度：41.66666666666667%; *宽度：41.56666666666667%； } .reflex-col-4 { 宽度：33.33333333333333%; *宽度：33.23333333333333%； } .reflex-col-3 { 宽度：25%; *宽度：24.9%； } .reflex-col-2 { 宽度：16.666666666666664%; *宽度：16.566666666666663%； } .reflex-col-1 { 宽度：8.333333333333332%; *宽度：8.233333333333333%； } @media（最小宽度：480px）{ .reflex-col-xs-12 { 宽度：100%; *宽度：99.9%； } .reflex-col-xs-11 { 宽度：91.66666666666666%; *宽度：91.56666666666666%； } .reflex-col-xs-10 { 宽度：83.33333333333334%; *宽度：83.23333333333335%； } .reflex-col-xs-9 { 宽度：75%; *宽度：74.9%； } .reflex-col-xs-8 { 宽度：66.66666666666666%; *宽度：66.56666666666666%； } .reflex-col-xs-7 { 宽度：58.333333333333336%; *宽度：58.233333333333334%； } .reflex-col-xs-6 { 宽度：50%; *宽度：49.9%； } .reflex-col-xs-5 { 宽度：41.66666666666667%; *宽度：41.56666666666667%； } .reflex-col-xs-4 { 宽度：33.33333333333333%; *宽度：33.23333333333333%； } .reflex-col-xs-3 { 宽度：25%; *宽度：24.9%； } .reflex-col-xs-2 { 宽度：16.666666666666664%; *宽度：16.566666666666663%； } .reflex-col-xs-1 { 宽度：8.333333333333332%; *宽度：8.233333333333333%； } } @media (min-width: 768px) { .reflex-col-sm-12 { 宽度: 100%; *宽度：99.9%； } .reflex-col-sm-11 { 宽度：91.66666666666666%; *宽度：91.56666666666666%； } .reflex-col-sm-10 { 宽度：83.33333333333334%; *宽度：83.23333333333335%； } .reflex-col-sm-9 { 宽度：75%; *宽度：74.9%； } .reflex-col-sm-8 { 宽度：66.66666666666666%; *宽度：66.56666666666666%； } .reflex-col-sm-7 { 宽度：58.333333333333336%; *宽度：58.233333333333334%； } .reflex-col-sm-6 { 宽度：50%; *宽度：49.9%； } .reflex-col-sm-5 { 宽度：41.66666666666667%; *宽度：41.56666666666667%； } .reflex-col-sm-4 { 宽度：33.33333333333333%; *宽度：33.23333333333333%； } .reflex-col-sm-3 { 宽度：25%; *宽度：24.9%； } .reflex-col-sm-2 { 宽度：16.666666666666664%; *宽度：16.566666666666663%； } .reflex-col-sm-1 { 宽度：8.333333333333332%; *宽度：8.233333333333333%； } } @media (min-width: 992px) { .reflex-col-md-12 { 宽度: 100%; *宽度：99.9%； } .reflex-col-md-11 { 宽度：91.66666666666666%; *宽度：91.56666666666666%； } .reflex-col-md-10 { 宽度：83.33333333333334%; *宽度：83.23333333333335%； } .reflex-col-md-9 { 宽度：75%; *宽度：74.9%； } .reflex-col-md-8 { 宽度：66.66666666666666%; *宽度：66.56666666666666%； } .reflex-col-md-7 { 宽度：58.333333333333336%; *宽度：58.233333333333334%； } .reflex-col-md-6 { 宽度：50%; *宽度：49.9%； } .reflex-col-md-5 { 宽度：41.66666666666667%; *宽度：41.56666666666667%； } .reflex-col-md-4 { 宽度：33.33333333333333%; *宽度：33.23333333333333%； } .reflex-col-md-3 { 宽度：25%; *宽度：24.9%； } .reflex-col-md-2 { 宽度：16.666666666666664%; *宽度：16.566666666666663%； } .reflex-col-md-1 { 宽度：8.333333333333332%; *宽度：8.233333333333333%； } } @media (最小宽度: 1200px) { .reflex-col-lg-12 { 宽度: 100%; *宽度：99.9%； } .reflex-col-lg-11 { 宽度：91.66666666666666%; *宽度：91.56666666666666%； } .reflex-col-lg-10 { 宽度：83.33333333333334%; *宽度：83.23333333333335%； } .reflex-col-lg-9 { 宽度：75%; *宽度：74.9%； } .reflex-col-lg-8 { 宽度：66.66666666666666%; *宽度：66.56666666666666%； } .reflex-col-lg-7 { 宽度：58.333333333333336%; *宽度：58.233333333333334%； } .reflex-col-lg-6 { 宽度：50%； *宽度：49.9%； } .reflex-col-lg-5 { 宽度：41.66666666666667%; *宽度：41.56666666666667%； } .reflex-col-lg-4 { 宽度：33.33333333333333%; *宽度：33.23333333333333%； } .reflex-col-lg-3 { 宽度：25%； *宽度：24.9%； } .reflex-col-lg-2 { 宽度：16.666666666666664%; *宽度：16.566666666666663%； } .reflex-col-lg-1 { 宽度：8.333333333333332%; *宽度：8.233333333333333%； } } .reflex-wrap { -webkit-flex-wrap: 换行；弹性包装：换行； } .reflex-wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: 换行； } .reflex-direction-row-reverse { -webkit-flex-direction: row-reverse; flex-direction：行反向； } .reflex-direction-column { -webkit-flex-direction: 列；弹性方向：列； } .reflex-direction-column-reverse { -webkit-flex-direction: column-reverse;弹性方向：列反向； } .reflex-align-start { -webkit-align-items: flex-start;对齐项目：弹性开始； } .reflex-align-end { -webkit-align-items: flex-end;对齐项目：flex-end； } .reflex-align-end [class*="reflex-col-"] { 垂直对齐：底部； } .reflex-align-center { -webkit-align-items: center;对齐项目：居中； } .reflex-align-center [class*="reflex-col-"] { 垂直对齐：中间； } .reflex-align-baseline { -webkit-align-items: 基线；对齐项目：基线； } .reflex-align-baseline [class*="reflex-col-"] { 垂直对齐：基线； } .reflex-align-content-start { -webkit-align-content: flex-start;对齐内容：弹性开始； } .reflex-align-content-end { -webkit-align-content: flex-end;对齐内容：弹性结束； } .reflex-align-content-end [class*="reflex-col-"] { 垂直对齐：底部； } .reflex-align-content-center { -webkit-align-content: center;对齐内容：居中； } .reflex-align-content-space-between { -webkit-align-content: space-between;对齐内容：之间的空格； } .reflex-align-content-space-around { -webkit-align-content: space-around;对齐内容：空格； } .reflex-align-self-stretch { -webkit-align-self: 拉伸；对齐自我：拉伸； } .reflex-align-self-start { -webkit-align-self: flex-start;对齐自我：弹性开始； } .reflex-align-self-end { -webkit-align-self: flex-end;对齐自我：flex-end；垂直对齐：底部； } .reflex-align-self-center { -webkit-align-self: center;对齐自我：中心；垂直对齐：中间； } .reflex-align-self-baseline { -webkit-align-self: 基线；对齐自我：基线；垂直对齐：基线； } .reflex-justify-start { 文本对齐：左； -webkit-justify-content：弹性启动；证明内容：弹性开始； } .reflex-justify-end { 文本对齐：对； -webkit-justify-content：flex-end；证明内容：弹性结束； } .reflex-justify-center { 文本对齐：中心； -webkit-justify-content：中心；证明内容：中心； } .reflex-justify-space-between { text-align: justify; -moz-text-align-last：对齐；文本对齐最后：对齐； -webkit-justify-content：空格之间； justify-content: 之间的空格； } .reflex-justify-space-around { text-align: justify; -moz-text-align-last：对齐；文本对齐最后：对齐； -webkit-justify-content：空间环绕； justify-content：空间环绕； } .reflex-item-margin-sm { 边距：0 0.25em 0.5em; } .reflex-item-margin-md { 边距：0 0.5em 1em; } .reflex-item-margin-lg { 边距：0 1em 2em; } .reflex-item-content-margin-sm * { margin-right: 0.25em;左边距：0.25em； } .reflex-item-content-margin-md * { margin-right: 0.5em;左边距：0.25em； } .reflex-item-content-margin-lg * { margin-right: 1em;左边距：1em； } .reflex-img { 显示：内联块；显示：-webkit-flex；显示：弯曲；缩放：1； *显示：内联； -webkit-flex：0 0 自动；弹性：0 0自动；左边距：0；右边距：0；最大宽度：100%；宽度：100%；高度：自动； } .reflex-item-footer { 边距顶部：自动；左边距：0；右边距：0； }

部分内容
kittenz
更多内容

欢迎来到堆栈溢出！虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。请参阅How do I write a good answer。
R
R3tep

这是我的解决方案（编译的 CSS）： 

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

所以你的代码看起来像： 

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

基本上，这与您使用 .col-* 类的系统相同，但您需要将 .row-* 类应用于行本身。

.row-sm-eq 列将堆叠在 XS 屏幕上。如果您不需要将它们堆叠在任何屏幕上，您可以使用 .row-xs-eq。

我们实际使用的 SASS 版本： 

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Live demo

注意：将 .col-xs-12 和 .col-xs-6 混合在一行中将无法正常工作。

这很好。我的解决方案是一样的。并且有可能使用 border-spacing 和负边距在标准 Bootstrap 的列之间有 30px 间隙的等高列。
С
Станислав Пономарев

在仅将解决方案 1 应用于行中的列时使用解决方案 1 存在问题。想改进解决方案1。 

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

（抱歉，不能评论 Popnoodles 的回答。我的声望不够）

N
Neal

对于那些寻求快速、简单的解决方案的人来说——如果你有一组相对一致的块内容，在 div 上设置一个比最大块大一点的最小高度可能更容易实现。 

.align-box {
    min-height: 400px;
}
A
Ajay Sathish

这是我的方法，我使用 flex 对媒体查询进行了一些更改。 

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

然后将所需的类添加到父级。 

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

我正在使用响应断点，因为通量通常会阻碍引导标准的响应性质。

O
Oleg

我将这个超级简单的解决方案与 clearfix 一起使用，它没有任何副作用。

这是一个关于 AngularJS 的例子： 

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

还有一个关于 PHP 的例子： 

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>
但是，这不会使您的列都具有相同的高度。
对我来说，想要在行中具有相同高度/位置的列，这是一个解决方案
k
kfn

我搜索了相同问题的解决方案，发现一个刚刚工作！ - 几乎没有额外的代码..

请参阅 https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 以获得良好的结果，并在底部提供您想要的响应，并带有链接。

https://www.codeply.com/go/EskIjvun4B

这对我来说是正确的响应方式......引用：...... 3 - 使用 flexbox（最好！）

截至 2017 年，在响应式设计中制作等高列的最佳（也是最简单）方法是使用 CSS3 flexbox。 

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

并简单地使用： 

div class="container">
   <div class="row display-flex .... etc..
M
MD Ashik

2019 年 3 月 19 日

**Bootstrap 4 等高解决方案**

Bootstrap Utilities/flex for equal height

Live example in Codepen

通过引导类与父 div 固定 height 或 min-height 等高 

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight { 背景色：rgba(86,61,124,.15);边框：1px 实心 rgba(86,61,124,.15); } .fixed-height-200 { 最小高度：200px; }

< br>

弹性项目
1111111111
弹性项目
弹性项目
弹性项目
弹性项目
弹性项目
< div class="p-2 bd-highlight bg-light">弹性项目
1111111111
弹性项目
1111111111
弹性项目
1111111111
弹性项目
弹性项目
弹性项目
弹性项目
弹性项目
弹性项目

为什么你给我反对票。你能评论一下吗？
C
Chris Moschini 
@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 和 9 死了，一旦 Android 2.x 死了，基于 flexbox 的答案就是正确的方法，但在 2015 年情况并非如此，而且可能不会在 2016 年出现。IE8 和 9 仍然构成 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。

V
VishAl

如果它在您的上下文中有意义，您可以在每次中断后简单地添加一个空的 12 列 div，它充当一个分隔器，将您所在行中最高单元格的底部包围起来。

一些内容
很多内容！内容丰富！内容丰富！内容丰富！内容丰富！
更多内容...
div>

希望这可以帮助！

这并没有回答他提出的问题！
b
brooksrelyt

HTML 

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS 

.option2 { background: red; border: black 1px solid; color: white; }

JS 

$('.option2').css({
    'height': $('.option2').height()
});
I
Igor Ivancha

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

下面的示例还提供了 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;
  }
}
T
Tom Kur

您可以将列包装在 div 中 

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>
使用其中一列中的按钮对我不起作用。

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.