How can I make Bootstrap columns all the same height?
我正在使用引导程序。我怎样才能使三根柱子的高度相同呢?
这是问题的截图。我想要蓝色和红色的柱子和黄色的柱子一样高。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> some content catz <img width="100" height="100" src="https://lorempixel.com/100/100/cats/"> some more content |
解决方案1使用负利润(不会破坏响应)
演示
1 2 3 4 5 6 7 8 | .row{ overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; } |
解决方案2使用表
演示
1 2 3 4 5 6 7 8 9 | .row { display: table; } [class*="col-"] { float: none; display: table-cell; vertical-align: top; } |
解决方案3使用Flex于2015年8月添加。在此之前发布的注释不适用于此解决方案。
演示
1 2 3 4 5 6 7 8 9 10 11 | .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; } |
更新2018
bootstap 3.x的最佳方法——使用css flexbox(并且需要最少的css)。
1 2 3 4 5 | .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; } |
引导相同高度的flexbox示例
要仅在特定断点(响应)应用相同高度的flexbox,请使用媒体查询。例如,这里是
1 2 3 4 5 6 | @media (min-width: 768px) { .row.equal { display: flex; flex-wrap: wrap; } } |
此解决方案也适用于多行(换行):https://www.bootply.com/gcexzpmehz
其他解决办法
这些选项将由其他人推荐,但对于响应式设计来说不是一个好主意。这些仅适用于不带列包装的简单单行布局。
1)使用巨大的负边距和填充
2)使用display:table cell(此解决方案也会影响响应网格,因此@media查询只能在列垂直堆叠之前在更宽的屏幕上应用
现在默认情况下,在引导4中使用了flexbox,因此不需要额外的CSS来生成等高的列:http://www.codeply.com/go/ijyri4lpwu
不需要javascript。只需将类
1 2 3 4 5 6 7 8 | some content kittenz <img src="http://placekitten.com/100/100"> some more content |
提示:如果您的行中有12列以上,引导网格将无法包装它。因此,每12列添加一个新的
提示:您可能需要添加
1 | <link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" /> |
你的HTML
要回答您的问题,您只需要看到带有前缀css的完整响应演示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* 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; } } |
若要在上面的屏幕截图等灵活列中添加对缩略图内容的支持,请添加此…注意,您也可以使用面板:
1 2 3 4 5 6 7 8 9 10 11 12 | .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网格)的回退演示作为polyfill:
1 2 3 | <!--[if lte IE 9]> <![endif]--> |
关于公认答案中的其他两个例子…表演示是一个不错的想法,但实施错误。在bootstrap列类上应用CSS无疑会完全破坏网格框架。您应该为1和2使用自定义选择器,表格样式不应应用于已定义宽度的
1 2 3 4 | Content... Content... |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | @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%; } } |
最后,接受答案中实现一个真正布局的版本的第一个演示对于某些情况是一个很好的选择,但不适用于引导列。原因是所有列都扩展到容器高度。所以这也会破坏响应,因为列不是扩展到它们旁边的元素,而是扩展到整个容器。此方法也不允许您再对行应用下边距,并且还会导致其他问题,如滚动到定位标记。
有关完整代码,请参阅自动在flexbox代码前面加前缀的代码笔。
您只显示一行,因此您的用例可能仅限于此。万一您有多行,这个插件-Github javascript网格-工作得很好!它使每个面板扩展到最高的面板,根据该行中最高的面板,每行可能具有不同的高度。这是一个jquery解决方案,而不是css,但想推荐它作为一种替代方法。
如果要在任何浏览器中实现此功能,请使用javascript:
1 2 3 4 5 6 7 8 9 | $( document ).ready(function() { var heights = $(".panel").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".panel").height(maxHeight); }); |
1 2 3 4 5 6 | .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
您也可以使用inline flex,它工作得很好,可能比使用css修改每个行元素要干净一点。
在我的项目中,我希望每一行的子元素都有相同的边界高度,这样边界看起来就会参差不齐。为此,我创建了一个简单的CSS类。
1 2 3 4 | .row.borders{ display: inline-flex; width: 100%; } |
如果有人感兴趣,可以使用冒失的jquery解决方案。只要确保你所有的cols(el)都有一个公共类名……如果你把它绑定到$(window),它也会起到相应的作用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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}); }); } |
用法
1 2 3 | $(document).ready(function(){ equal_cols('.selector'); }); |
注:本帖已根据@chris'评论进行编辑,指出代码仅在
前面的一些答案解释了如何使分隔符具有相同的高度,但问题是,当宽度太窄时,分隔符将不会堆叠,因此您可以用一个额外的部分来实现它们的答案。对于每个分区,除了使用的行类之外,还可以使用此处给出的CSS名称,因此如果始终希望分区彼此相邻,则该分区应如下所示:
1 | Your Content Here |
对于所有屏幕:
1 2 3 4 5 6 7 | .row-eq-height-xs { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; } |
当你想使用SM时:
10当您想要MD时:
1 2 3 4 5 6 7 8 9 10 11 12 | .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时:
1 2 3 4 5 6 7 8 9 10 11 12 | .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; } } |
编辑根据注释,确实有一个更简单的解决方案,但您需要确保为所有尺寸(如
1 2 3 4 5 6 7 8 | .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: row; flex-wrap: wrap; } |
我尝试了很多在这个线程和其他页面上提出的建议,但没有一个解决方案在每个浏览器中都能100%发挥作用。
所以我做了一段时间的实验,并提出了这个问题。在flexbox的帮助下,只需1个类就可以完成引导等高列的完整解决方案。这适用于所有主要浏览器IE10+。
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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:
1 |
例如,要支持更多版本的IE,您可以使用https://github.com/liabru/jquery-match-height,并以
1 2 3 4 | // Create a check for IE9 (or any other specific browser). if(IE9) { $(".row.equal-cols > [class*='col-']").matchHeight(); } |
如果没有这个polyfill,列将像通常的引导列一样工作,因此这是一个非常好的回退。
我很惊讶,在2018年底我找不到一个有价值的解决方案。我自己用flexbox开发了一个bootstrap 3解决方案。
简单明了的例子:
HTML
1 2 3 4 5 6 7 8 9 10 11 | <p> Text </p> <img src="//placehold.it/200x200"> <p> Text </p> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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/
我知道我很晚了,但现在你可以使用"最小高度"样式属性来实现你的目标。
这是我的解决方案(已编译的CSS):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | .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; } } |
所以您的代码应该是:
1 | <!-- your old cols definition here --> |
基本上,这是用于
使用
我们实际使用的SASS版本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .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; } } } |
现场演示
注:在单列中混合
在只对行中的列应用解决方案1时,使用该解决方案存在问题。希望改进解决方案1。
1 2 3 4 | [class^="col-"]:not([class*="-12"]){ margin-bottom: -99999px; padding-bottom: 99999px; } |
(对不起,不能评论泡面的威力。我没有足够的声誉)
如果有人使用bootstrap 4并寻找等高的列,只需使用
1 2 3 4 5 | <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> .row.row-eq-height > .col-xs-4 .row.row-eq-height > .col-xs-4this isa muchtallercolumnthan the others .row.row-eq-height > .col-xs-4 |
参考:http://getbootstrap.com.vn/examples/equal-height-columns/
对于那些寻求快速、简单解决方案的人来说——如果有一组相对一致的块内容,那么在DIV上设置一个比最大块大一点的最小高度就更容易实现。
1 2 3 | .align-box { min-height: 400px; } |
最好在那里:
Github Reflex-文档使用引导程序
更新:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 | /*! * * 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 G.C.S.E. * email: [email protected] * 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; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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"> some content kittenz <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg"> some more content |
我找了一个解决这个问题的方法,结果发现一个很有效!!几乎没有额外的代码……
请参阅https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27对于一个很好的废弃,与你想要的呼吸在底部,与一个链接。
https://www.codeply.com/go/eskijvun4b
这对我来说是正确的回应方式…引文:…三?-?使用flexbox(最佳!)
截至2017年,在响应式设计中制作等高柱的最佳(也是最简单)方法是使用CSS3 flexbox。
1 2 3 4 5 6 7 8 | .row.display-flex { display: flex; flex-wrap: wrap; } .row.display-flex > [class*='col-'] { display: flex; flex-direction: column; } |
简单使用:
1 2 | div class="container"> <div class="row display-flex .... etc.. |
这是我的方法,我在媒体查询中使用了flex。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @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; } } |
然后将类添加到所需的父类中。
1 2 3 | column 1 column 2 column 3 |
我之所以使用响应断点,是因为Flux通常会妨碍引导程序的标准响应特性。
10
其中.container height是必须添加到.row样式的元素中的样式类,其所有.col*子元素的高度都相同。
仅将这些样式应用于某个特定的.row(如示例中那样具有.container高度)也可以避免对所有.col*应用边距和填充溢出。
我在
以下是关于AngularJS的示例:
1 |
还有一个关于php的例子:
1 2 3 4 5 6 7 | <?php foreach ($list as $i => $item): ?> <?php if ($i % 2 === 1): ?> <?php endif; ?> <?php endforeach; ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | @media (min-width: @screen-sm-min) { div.equal-height-sm { display: table; > div[class^='col-'] { display: table-cell; float: none; vertical-align: top; } } } Test<br/>Test<br/>Test Test |
例子:
https://jsfiddle.net/b9chris/njcnex83/embedded/result/结果/
改编自以下几个答案。基于flexbox的答案是正确的,一旦IE8和9死了,一旦android 2.x死了,但这在2015年不是真的,很可能不会在2016年。IE8和9仍然占使用率的4-6%,这取决于您如何衡量,而且对于许多公司用户来说,情况更糟。http://canius.com/feat=flexbox
显然,您可以添加更多执行类似操作的类,如
请注意,这里的JSfiddle使用CSS,因此,如果不使用CSS,那么将提供的内容在链接的示例中是硬编码的。例如,@screen sm min已替换为less将插入的-768px。
如果在您的上下文中有意义,您可以在每次中断后简单地添加一个空的12列DIV,它充当一个分隔符,包围行中最高单元格的底部。
1 2 3 4 5 6 7 | Some content Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! More content... <!--this You forgot to close --> |
希望这有帮助!
试试这个直走式伸缩箱
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .container { display: flex; padding-bottom: 50px; } .col { background: blue; padding: 30px; } .col.center { background: red; height: 100px; margin-bottom: -50px; } |
1 2 3 | Left Center Right |
实况jspiddle-https://jsfiddle.net/grinmax_u/spsn4fqnq/
所以,是的,bootstrap 4确实使一行中的所有列的高度相等,但是如果您在该行中的内容周围创建一个边界,您可能会发现它看起来像是列的高度不相等!
当我把
我的解决方案是在col的div上使用padding(而不是在内部元素上使用空白)。像这样:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | ... ... ... ... ... ... ... ... ... |
上面的代码示例使用bootstrap 4.1创建一组带有边框的九个框
我想补充一下,Flink博士给出的答案也可以应用于bootstrap 3
下面的示例还提供了CSS,它演示了一个附加的媒体查询,它允许引导程序3简单地接管并在较小的屏幕上执行正常的操作。这也适用于IE8+。
例子:
1 2 3 4 5 6 7 8 9 10 11 12 | <form class="form-horizontal" role="form"> <label class="col-xs-12 col-sm-2 control-label">My Label</label> Some content </form> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .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; } } |
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <p> left column </p> <p> The first column has to be the longest The first column has to be the longes </p> <p> middle column </p> <p> right column </p> <p> right column </p> <p> right column </p> <p> right column </p> <p> right column </p> |
CSS
1 | .option2 { background: red; border: black 1px solid; color: white; } |
JS
1 2 3 | $('.option2').css({ 'height': $('.option2').height() }); |
您可以将列包装在一个DIV中
1 2 3 4 5 6 7 8 | some content kittenz <img src="http://placekitten.com/100/100"> some more content |
03/19/2019
**引导4等高解决方案**
同等高度的引导实用程序/flex
代码笔中的实时示例
用bootstrap类与父DIV固定的
1 2 3 4 | Flex height test text for example , Flex height test text for example Flex item Flex item Flex item |
1 2 3 4 5 6 7 | .bd-highlight { background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.15); } .fixed-height-200 { min-height: 200px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> Flex item 1111111111 Flex item Flex item Flex item Flex item Flex item Flex item 1111111111 Flex item 1111111111 Flex item 1111111111 Flex item Flex item Flex item Flex item Flex item Flex item |
只需检查引导程序文档,我就找到了解决柱高度相同问题的简单方法。
只为所需的视区添加额外的ClearFix
1 |
例如:
10请参阅http://getbootstrap.com/css/网格响应重置
您可以使用下面的代码
1 2 3 4 5 | var heights = $(".row > div").map(function() { return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights); $(".row > div").height(maxHeight); |
这里有很多CSS…
JQuery
1 2 3 4 5 6 7 8 9 | $(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); }); |
非常简单的代码不需要使用CSS,尽管上面的所有选项都是完全可用的。
杰西德