Bootstrap 3＆flexbox（？）和塊顯示

我正在使用Bootstrap 3（不幸的是無法將其更改爲Bootstrap 4），我需要實現像圖片中一樣的高度的列效果：我已經通過使用位置絕對和@media屏幕來獲得正確的圖像大小和填充（黃色區域），但我相信有更好的方法來解決它。Bootstrap 3＆flexbox（？）和塊顯示

我發現很好的工作代碼here，但添加圖片在頂部破壞設計 - 圖片進入額外的列和鏈接所有的內容（）。添加顯示：塊將我帶回原始問題 - 不同高度的列。

我確定有一些乾淨和機智的方式來使它工作！編輯：到目前爲止，我有一個主行（下圖中的綠色框），其中3列。如果我將3行改爲（紅色框架），並且僅將相同高度應用於中間內容，該怎麼辦？它可以在大屏幕上正常工作，但在小屏幕上，當列需要全屏顯示時，最後會有3張圖片在另一張下面，三個描述部分在另一個下面，三個按鈕在另一個下面 - 絕對不是我想要的！在這種情況下是否有任何方法重新排列列的顯示，所以我會得到3x圖片描述按鈕？

EDIT2：代碼段添加

html,body { 
 
\t 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 { 
 
\t -webkit-flex-flow: row wrap; 
 
    align-content: flex-start; 
 
    flex:0; 
 
} 
 

 

 
.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div { 
 
\t 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"> 
 
\t <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"> 
 
\t <img class="img-responsive" src="http://placehold.it/200x100"> 
 
    \t <div class="well"> 
 
     Duis pharetra varius quam sit amet vulputate. 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    \t <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> 
 
    \t 
 
    </div><!--/row--> 
 
</div><!--/container--> 
 
<hr> 
 

 

 

 
</body>

來源

2016-10-05 oboer

使用'顯示：表cell'方法。 –

使用css'min-height'屬性！ –

@Paulie_D，我附上了兩個顯示問題的'here'鏈接;我相信這正是'最短代碼必需'的含義。 – oboer

我認爲你只需要繼續將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-->

Codepen Demo

來源

2016-10-05 12:45:26

我將它與@media屏幕（min-width：x）混合在一起，用於包圍較小屏幕的列，並且它的工作原理類似於魅力。非常有幫助，謝謝！ – oboer

有沒有其他辦法讓它在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>

只重寫引導樣式的具體內容。

來源

2016-10-05 06:42:58

Bootstrap 3＆flexbox（？）和塊顯示

回答

相關問題