我怎样才能使Bootstrap列高度相同？
我正在使用Bootstrap。 我怎样才能使三列同一高度？
这是一个问题的截图。 我希望蓝色和红色的柱子与黄色柱子的高度相同。
这里是代码：
<link href="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> 解决scheme1使用负边距（不会中断响应）
演示
.row{ overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }
解决scheme2使用表
演示
.row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; }
解决scheme3使用柔性版本 2015年8月添加。此前发布的评论不适用于此解决scheme。
演示
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; }
2017年更新
Bootstap 3.x的最佳途径 – 使用CSS flexbox （并且需要最less的CSS）..
.equal { display: flex; display: -webkit-flex; flex-wrap: wrap; }
Bootstrap相同高度flexbox的例子
要仅在特定的断点（响应）应用相同的高度柔性盒，请使用媒体查询。 例如，这里是sm （768px）和up：
@media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } }
该解决scheme也适用于多行（列换行）：
https://www.bootply.com/gCEXzPMehZ
其他解决方法
这些选项将被其他人推荐，但对于响应式devise不是一个好主意 。 这些只适用于简单的单行布局w / o列包装。
1）使用巨大的负边距和填充
2）使用display：table-cell （这个解决scheme也影响响应式网格，所以@media查询可以用来在垂直堆叠之前在更宽的屏幕上应用table显示）
Bootstrap 4
Bootstrap 4现在默认使用Flexbox，因此不需要额外的CSS来创build相同高度的列： http : //www.codeply.com/go/IJYRI4LPwU
没有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="examples/equal-height-columns/equal-height-columns.css" />
到你的html
要回答你的问题，这是你需要看到全面的响应式演示与前缀的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; } }
要添加对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%; }
尽pipeflexbox在IE9及其下的版本中不起作用，但您可以使用带有条件标签的javascriptx格作为polyfil来使用示例：
<!--[if lte IE 9]> <![endif]-->
至于在接受的答案另外两个例子…表演示是一个体面的想法，但正在执行错误。 特别是在引导列类上应用这个CSS将毫无疑问地完全破坏网格框架。 你应该使用一个自定义的select器来定义一个和两个表格样式不应该被应用到[class*='col-'] 。 这个方法应该只用于如果你不相等的高度和等宽的列。 这不是意味着任何其他布局，不响应。 我们可以让它在移动显示器上倒退…
// HTML <div class="table-row-equal"> <div class="thumbnail"> Content... </div> <div class="thumbnail"> Content... </div> </div> //CSS @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; border-spacing: 30px 0px; } .table-row-equal .thumbnail { float: none; display: table-cell; vertical-align: top; width: 1%; } }
最后，接受答案中的第一个演示实现了一个版本的真实布局，对于某些情况是一个不错的select，但不适用于自举列。 原因是所有的列都扩展到容器高度。 所以这也会打破响应，因为列不是扩展到旁边的元素，而是整个容器。 此方法也不允许您将底部边距应用于行，也会导致其他问题，例如滚动到定位标记。
有关完整的代码，请参阅自动为Flexbox代码添加前缀的代码簿。
你只显示一行，所以你的用例可能会受限于此。 万一你有多行，这个插件 – github Javascript-grids – 完美的工作！ 它使每个面板扩展到最高的面板，根据该行中最高的面板，每行可能具有不同的高度。 这是一个jQuery的解决scheme与CSS，但要推荐它作为一种替代方法。
如果你想在任何浏览器中使用这个工作，请使用javascript：
$( document ).ready(function() { var heights = $(".panel").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".panel").height(maxHeight); });
你也可以使用inline-flex，这个工作很好，比用CSS修改每一行元素要简单一些。
对于我的项目，我希望每一行的子元素边界都是相同的高度，所以边界看起来会锯齿状。 为此，我创build了一个简单的css类。
.row.borders{ display: inline-flex; width: 100%; }
以前的一些答案解释了如何使div的高度相同，但问题是，当宽度太窄divs不会堆叠，因此你可以用一个额外的部分来实现他们的答案。 对于每一个你可以使用这里给出的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; } }
.row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
从：
我知道我很晚，但现在你可以使用“最小高度”风格属性来达到你的目的。
厚颜无耻的jquery解决scheme，如果任何人的兴趣。 只要确保你所有的col（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()函数的最后一个高度
我尝试了很多在这个线程和其他页面上提出的build议，但没有任何解决scheme在每个浏览器中都能够100％地工作。
所以我试了很长时间，想出了这个。 Bootstrap Equal Height色谱柱的完整解决scheme ，只需一个Flexbox 。 这适用于所有主stream浏览器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，这些列的行为将和往常一样，所以这是一个相当不错的回退。
使用解决scheme1时遇到问题，而仅将其应用于行中的列。 想改进解决scheme1。
[class^="col-"]:not([class*="-12"]){ margin-bottom: -99999px; padding-bottom: 99999px; }
（对不起，不能评论Popnoodles的味道，我没有足够的声誉）
这里是我的解决scheme（编译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; } } }
现场演示
注意：在一行内混合.col-xs-12和.col-xs-6将无法正常工作。
最好在那里：
Githubreflection – 文档
与引导一起使用
更新：
- 包括CSS
- 更新你的代码：
/*! * * Reflex v1.0 * * Reflex is a flexbox grid which provides a way to take advantage of emerging * flexbox support while providing a fall back to inline-block on older browsers * * Built by Lee Jordan GCSE * email: ldjordan@gmail.com * github: https://github.com/leejordan * * Structure and calculations are inspired by twitter bootstrap * */ .reflex-order-12 { -webkit-order: 12; -ms-flex-order: 12; order: 12; } .reflex-order-11 { -webkit-order: 11; -ms-flex-order: 11; order: 11; } .reflex-order-10 { -webkit-order: 10; -ms-flex-order: 10; order: 10; } .reflex-order-9 { -webkit-order: 9; -ms-flex-order: 9; order: 9; } .reflex-order-8 { -webkit-order: 8; -ms-flex-order: 8; order: 8; } .reflex-order-7 { -webkit-order: 7; -ms-flex-order: 7; order: 7; } .reflex-order-6 { -webkit-order: 6; -ms-flex-order: 6; order: 6; } .reflex-order-5 { -webkit-order: 5; -ms-flex-order: 5; order: 5; } .reflex-order-4 { -webkit-order: 4; -ms-flex-order: 4; order: 4; } .reflex-order-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3; } .reflex-order-2 { -webkit-order: 2; -ms-flex-order: 2; order: 2; } .reflex-order-1 { -webkit-order: 1; -ms-flex-order: 1; order: 1; } .reflex-order-0 { -webkit-order: 0; -ms-flex-order: 0; order: 0; } .reflex-container { display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; margin: 0; padding: 0; position: relative; width: 100%; letter-spacing: -0.31em; *letter-spacing: normal; word-spacing: -0.43em; list-style-type: none; } .reflex-container *, .reflex-container:before, .reflex-container:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; max-width: 100%; letter-spacing: normal; word-spacing: normal; white-space: normal; } .reflex-container *:before, .reflex-container *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class*="reflex-col-"] { width: 100%; vertical-align: top; position: relative; display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; text-align: left; text-align: start; } .reflex-item { display: block; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-flex: 1 1 auto; flex: 1 1 auto; } _:-ms-fullscreen, :root .reflex-item { width: 100%; } .reflex-col-12 { width: 100%; *width: 99.9%; } .reflex-col-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-9 { width: 75%; *width: 74.9%; } .reflex-col-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-6 { width: 50%; *width: 49.9%; } .reflex-col-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-3 { width: 25%; *width: 24.9%; } .reflex-col-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } @media (min-width: 480px) { .reflex-col-xs-12 { width: 100%; *width: 99.9%; } .reflex-col-xs-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-xs-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-xs-9 { width: 75%; *width: 74.9%; } .reflex-col-xs-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-xs-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-xs-6 { width: 50%; *width: 49.9%; } .reflex-col-xs-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-xs-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-xs-3 { width: 25%; *width: 24.9%; } .reflex-col-xs-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-xs-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 768px) { .reflex-col-sm-12 { width: 100%; *width: 99.9%; } .reflex-col-sm-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-sm-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-sm-9 { width: 75%; *width: 74.9%; } .reflex-col-sm-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-sm-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-sm-6 { width: 50%; *width: 49.9%; } .reflex-col-sm-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-sm-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-sm-3 { width: 25%; *width: 24.9%; } .reflex-col-sm-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-sm-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 992px) { .reflex-col-md-12 { width: 100%; *width: 99.9%; } .reflex-col-md-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-md-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-md-9 { width: 75%; *width: 74.9%; } .reflex-col-md-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-md-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-md-6 { width: 50%; *width: 49.9%; } .reflex-col-md-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-md-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-md-3 { width: 25%; *width: 24.9%; } .reflex-col-md-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-md-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } @media (min-width: 1200px) { .reflex-col-lg-12 { width: 100%; *width: 99.9%; } .reflex-col-lg-11 { width: 91.66666666666666%; *width: 91.56666666666666%; } .reflex-col-lg-10 { width: 83.33333333333334%; *width: 83.23333333333335%; } .reflex-col-lg-9 { width: 75%; *width: 74.9%; } .reflex-col-lg-8 { width: 66.66666666666666%; *width: 66.56666666666666%; } .reflex-col-lg-7 { width: 58.333333333333336%; *width: 58.233333333333334%; } .reflex-col-lg-6 { width: 50%; *width: 49.9%; } .reflex-col-lg-5 { width: 41.66666666666667%; *width: 41.56666666666667%; } .reflex-col-lg-4 { width: 33.33333333333333%; *width: 33.23333333333333%; } .reflex-col-lg-3 { width: 25%; *width: 24.9%; } .reflex-col-lg-2 { width: 16.666666666666664%; *width: 16.566666666666663%; } .reflex-col-lg-1 { width: 8.333333333333332%; *width: 8.233333333333333%; } } .reflex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; } .reflex-wrap-reverse { -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .reflex-direction-row-reverse { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } .reflex-direction-column { -webkit-flex-direction: column; flex-direction: column; } .reflex-direction-column-reverse { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .reflex-align-start { -webkit-align-items: flex-start; align-items: flex-start; } .reflex-align-end { -webkit-align-items: flex-end; align-items: flex-end; } .reflex-align-end [class*="reflex-col-"] { vertical-align: bottom; } .reflex-align-center { -webkit-align-items: center; align-items: center; } .reflex-align-center [class*="reflex-col-"] { vertical-align: middle; } .reflex-align-baseline { -webkit-align-items: baseline; align-items: baseline; } .reflex-align-baseline [class*="reflex-col-"] { vertical-align: baseline; } .reflex-align-content-start { -webkit-align-content: flex-start; align-content: flex-start; } .reflex-align-content-end { -webkit-align-content: flex-end; align-content: flex-end; } .reflex-align-content-end [class*="reflex-col-"] { vertical-align: bottom; } .reflex-align-content-center { -webkit-align-content: center; align-content: center; } .reflex-align-content-space-between { -webkit-align-content: space-between; align-content: space-between; } .reflex-align-content-space-around { -webkit-align-content: space-around; align-content: space-around; } .reflex-align-self-stretch { -webkit-align-self: stretch; align-self: stretch; } .reflex-align-self-start { -webkit-align-self: flex-start; align-self: flex-start; } .reflex-align-self-end { -webkit-align-self: flex-end; align-self: flex-end; vertical-align: bottom; } .reflex-align-self-center { -webkit-align-self: center; align-self: center; vertical-align: middle; } .reflex-align-self-baseline { -webkit-align-self: baseline; align-self: baseline; vertical-align: baseline; } .reflex-justify-start { text-align: left; -webkit-justify-content: flex-start; justify-content: flex-start; } .reflex-justify-end { text-align: right; -webkit-justify-content: flex-end; justify-content: flex-end; } .reflex-justify-center { text-align: center; -webkit-justify-content: center; justify-content: center; } .reflex-justify-space-between { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -webkit-justify-content: space-between; justify-content: space-between; } .reflex-justify-space-around { text-align: justify; -moz-text-align-last: justify; text-align-last: justify; -webkit-justify-content: space-around; justify-content: space-around; } .reflex-item-margin-sm { margin: 0 0.25em 0.5em; } .reflex-item-margin-md { margin: 0 0.5em 1em; } .reflex-item-margin-lg { margin: 0 1em 2em; } .reflex-item-content-margin-sm * { margin-right: 0.25em; margin-left: 0.25em; } .reflex-item-content-margin-md * { margin-right: 0.5em; margin-left: 0.25em; } .reflex-item-content-margin-lg * { margin-right: 1em; margin-left: 1em; } .reflex-img { display: inline-block; display: -webkit-flex; display: flex; zoom: 1; *display: inline; -webkit-flex: 0 0 auto; flex: 0 0 auto; margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; height: auto; } .reflex-item-footer { margin-top: auto; margin-left: 0; margin-right: 0; }
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="reflex-container reflex-wrap"> <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red"> some content </div> <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow"> kittenz <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg"> </div> <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue"> some more content </div> </div>
这里是我的方法，我已经用媒体查询中的一些变化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>
我正在使用响应式断点，因为stream量通常会阻碍自举标准的响应性。
如果在上下文中有意义，则可以在每次rest之后简单地添加一个空的12列div，作为分隔符，用于拥抱行中最高单元格的底部。
<div class="row"> <div class="col-xs-6">Some content</div> <div class="col-xs-6"> Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! </div> <div id="spacer-div" class="col-xs-12"></div> <div class="col-xs-6">More content...</div> </div><!--this You forgot to close -->
对于那些寻找快速，简单的解决scheme – 如果你有一个相对一致的块内容设置一个最小高度的div比最大的块大一点可以更容易实现。
.align-box { min-height: 400px; }
.row.container-height { overflow: hidden; } .row.container-height > [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }
@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死了，基于Flexbox的答案是正确的，一旦Android 2.x死了，但在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已经被replace为Less将会插入 – 768px。
我想补充一下，Dr.Flink给出的答案也可以应用到Bootstrap 3 form-horizontal块 – 如果你想为每个单元格使用背景颜色，这可能非常方便。 为了使它适用于引导表单，你需要包装表单内容，这些内容只是用来复制类似表格的结构。
下面的例子还提供了CSS，它演示了一个额外的媒体查询允许Bootstrap 3简单地接pipe，并在较小的屏幕上进行正常的操作。 这也适用于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; } }
我使用这个超级简单的解决scheme与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>
And one more example on 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; ?>
You can wrap the columns inside a 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>
Try this do through flex-box
.container { display: flex; padding-bottom: 50px; } .col { background: blue; padding: 30px; } .col.center { background: red; height: 100px; margin-bottom: -50px; }
<div class="container"> <div class="col">Left</div> <div class="col center">Center</div> <div class="col">Right</div> </div>
Just checking through bootstrap documentation and I found the simple solution for the problem of column same height.
Add the extra clearfix for only the required viewport
<div class="clearfix visible-xs-block"></div>
例如：
<div class="col-md-3 col-xs-6">This is a long text</div> <div class="col-md-3 col-xs-6">This is short</div> <div class="clearfix visible-xs-block">This is a long text</div> <div class="col-md-3 col-xs-6">Short</div> <div class="col-md-3 col-xs-6">Long Text</div> <div class="clearfix visible-xs-block"></div> <div class="col-md-3 col-xs-6">Longer text which will push down</div> <div class="col-md-3 col-xs-6">Short</div>
Please refer to http://getbootstrap.com/css/#grid-responsive-resets
You can use below code
var heights = $(".row > div").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".row > div").height(maxHeight);
alot of css here…
jQuery的
$(document).ready(function() { // Get height of original column you want to match var box-height = $('.panel:nth-child(1)').outerHeight(); // Output same height on particular element or element(s) $('.panel').height(box-height); });
Really simple code no need to play with css, although all options above are perfectly usable.
Jsfiddle
