帶有Bootstrap 3和flexbox的等高柱
[英]Equal height columns with Bootstrap 3 and flexbox
問題描述
我正在使用Bootstrap 3（遺憾的是無法將其更改為Bootstrap 4）並且我需要實現與圖片中相同的高度列效果： 我已經成功通過使用位置絕對和@media屏幕來獲得正確的圖像大小和填充（黃色區域），但我相信有更好的方法來解決它。
我在這里找到了很好的工作代碼，但是在頂部添加圖片會破壞設計 - 圖片會添加到其他列中並展示所有內容（ 此處 ）。 添加顯示：塊讓我回到原始問題 - 不同高度的列。
我確信有一些干凈利落的方式讓它起作用！
編輯：到目前為止，我有一個主行（下圖中的綠框），其中有3列。 如果我改為3行（紅色框架）並僅對中間內容應用相同高度怎么辦？ 它可以在大屏幕上很好地工作，但是在小屏幕上，當列占據整個屏幕寬度時，它最終會有3張圖片一張在另一張下，三張描述部分在另一張下面，三個按鈕在另一張下面 - 絕對不是我想要的！ 在這種情況下有沒有辦法重新排列列的顯示，所以我會得到3x圖片描述按鈕？
edit2：添加了代碼段
html,body { height:100%; } .row-flex, .row-flex > div[class*='col-'] { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex:1 1 auto; } .row-flex-wrap { -webkit-flex-flow: row wrap; align-content: flex-start; flex:0; } .container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div { width:100%; }
<header> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </header> <body> <div class="container"><h3>.row-flex (make columns equal heights in each row)</h3></div> <div class="container"> <div class="row row-flex row-flex-wrap"> <div class="col-xs-4"> <div class="well"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. </div> </div> <div class="col-xs-4"> <img class="img-responsive" src="http://placehold.it/200x100"> <div class="well"> Duis pharetra varius quam sit amet vulputate. </div> </div> <div class="col-xs-4"> <div class="well"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. </div> </div> </div><!--/row--> </div><!--/container--> <hr> </body>
2 個解決方案
解決方案1
7 已采納 2016-10-05 12:45:26
我認為你只需要繼續將flexbox的應用擴展到孩子們身上。
但請注意，圖像可能會對本機靈活兒童造成嚴重影響。 將圖像包裝在div中可以解決問題。
html, body { height: 100%; } .row-flex { display: flex; /* columns are now equal height */ } .col-md-3 { background: pink; display: flex; flex-direction: column; } .panel, .well { /* make panels & wells expand to full height */ flex: 1; display: flex; flex-direction: column; } .panel-footer { /* push footer to bottom */ margin-top: auto; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row row-flex"> <div class="col-md-3"> <div class="panel panel-default flex-col"> <div class="panel-heading">Title flex-col</div> <div class="panel-body flex-grow">Content here -- div with .flex-grow</div> <div class="panel-footer">Footer</div> </div> </div> <div class="col-md-3"> <div> <img class="img-responsive" src="http://placehold.it/400x100"> </div> <div class="well"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. </div> </div> <div class="col-md-3"> <div class="well"> Duis pharetra varius quam sit amet vulputate. </div> </div> <div class="col-md-3"> <div class="well"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. </div> </div> </div> <!--/row--> </div> <!--/container-->
解決方案2
2
在CSS中沒有其他方法可以使它具有相同的高度。 我的意思是動態（沒有設置特定的高度）。
如果將顯示flex更改為顯示塊。 它不會起作用。
選項：Javascript。 獲得3個flex-children的高度，並使用Math.max（）進行比較; 將返回編號設置為flex-children。
* { margin: 0; padding: 0; } .flex { display: flex; justify-content: space-between; } .flex-children { width: 30%; background: red; }
<div class="flex"> <div class="flex-children">asd</div> <div class="flex-children"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora et nisi harum eaque quas similique esse voluptas? Expedita in vitae, vel unde deleniti hic dolores rerum. Aliquam quos quidem quae.</p> </div> <div class="flex-children">ddey</div> </div>
只需覆蓋特定內容的引導樣式即可。
Flexbox 等高列
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.