在此設計中，我有一點非常規的DIV，如下所示。我可以使用高度，但我希望它可以動態更改：例如，如果DIV有更多內容並且高度在右側的某個塊中發生了變化，則左側DIV自動調整其高度。我想知道flex是否有幫助。下面是它應該如何更改爲：引導程序中列的高度相等4

我到目前爲止這個HTML：

<div class="container"> 
    <div class="row row-eq-height"> 
     <div class="col-sm-8 col-8"> 
     <div class="black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-sm-4 col-4"> 
     <div class="red"> 
      <p>numbers</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div>

和CSS：

p { color: #fff; } 
.black { background-color: black; } 
.green { background-color: green; } 
.red { background-color: red; } 
.blue { background-color: blue; } 
.purple { background-color: purple; }

JSFiddle Demo

來源

2017-10-06 Elaine Byene

[與CSS等高的列]（https://stackoverflow.com/q/33813871/3597276）| [修改小提琴]（https://jsfiddle.net/ar0m0p3a/2/） –

您可以使用flexbox此。

更新

而另一種方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/5/

.row-eq-height > [class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

.row-eq-height > [class^=col]:last-of-type div { 
    margin: 10px; 
} 

.row-eq-height > [class^=col]:last-of-type div:first-of-type { 
    margin-top: 0; 
} 

.row-eq-height > [class^=col]:last-of-type div:last-of-type { 
    margin-bottom: 0; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
}

更新

一個更好的更具體的類方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/3/

.row-eq-height > [class^=col]:first-of-type { 
    display: flex; 
} 

.row-eq-height > [class^=col]:first-of-type .black { 
    flex-grow: 1; 
} 

.blue p { 
    margin: 0; 
}

原始的方式：

https://jsfiddle.net/persianturtle/ar0m0p3a/1/

[class^=col] { 
    display: flex; 
    flex-direction: column; 
} 

[class^=col] div { 
    flex-grow: 1 
}

來源

2017-10-06 17:40:18

太棒了。我們可以使用特定的類名而不是'col'或'div'嗎？因爲我在頁面中有其他的col和div，它可能會產生問題 –

@ElaineByene絕對。使用一個適合你的選擇器。我首先建議學習flexbox，因爲它一開始有點棘手。如果您遇到問題，請隨時諮詢flexbox的具體問題。樂於幫助。 –

@ElaineByene，我更新了另一個使用更具體/語義選擇器的實現。 –

您使用的自舉4，對不對？引導4默認情況下，實現了Flexbox的，你可以同時使用純類解決這個很容易引導4條規定：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-8 col-8 black"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     <div class="col-sm-4 col-4 d-flex align-content-around flex-wrap"> 
     <div class="red"> 
      <p>numbers and more and so on and on and on</p> 
     </div> 
     <div class="purple"> 
      <p>numbers</p> 
     </div> 
     <div class="green"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p class="mb-0">numbers</p> 
     </div> 
     </div> 
    </div> 
</div>

JS小提琴鏈接：https://jsfiddle.net/ydjds2ko/

詳情：

你不需要類row-eq-height（反正它不在Bootstrap4 中），因爲等高是默認值。
類col-sm-8的第一個div具有正確的高度，它只是在黑色背景下不可見，因爲內部div有它自己的高度。我剛剛刪除了內部div，並將類black添加到列。如果您需要內部div，請爲（Bootstrap4）類h-100調整高度爲父元素。
與col-sm-4類的div獲得了類d-flex align-content-around flex-wrap。他們正在調整內容分區。引導數獨：https://getbootstrap.com/docs/4.0/utilities/flex/#align-content
- 在父與W-100
的widht設置此容器內部的div的寬度，因爲<p>在底部增加了利潤，你的藍格在結束不會與黑色div齊平。我添加了類「mb-0」，它將頁邊距底部設置爲「0」，以便您可以看到它的工作原理。

這應該工作更多的權利或左div是一個具有較大的高度屬性。

編輯：添加內容對齊的類。

來源

2017-10-07 10:04:29 programmiri

太簡單了！但是，在這種情況下它不起作用：https：//jsfiddle.net/huoaynb0/1/ –

你說得對！右欄中的div項不能正確對齊自己。幸運的是，Bootstrap也涵蓋了這種情況。你可以像這樣工作：https：//jsfiddle.net/ydjds2ko/ – programmiri

這裏是一個非常簡單的Bootstrap只有的方法。你不需要任何額外的CSS。

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

<div class="container"> 
    <div class="row"> 
     <div class="col-8"> 
     <div class="black h-100"> 
      <p>Bar Graph or Line Graph</p> 
     </div> 
     </div> 
     <div class="col-4 d-flex flex-column"> 
     <div class="red mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="purple mb-2"> 
      <p>numbers with more lines of content that wrap to the next line</p> 
     </div> 
     <div class="green mb-2"> 
      <p>numbers</p> 
     </div> 
     <div class="blue"> 
      <p>numbers</p> 
     </div> 
     </div> 
    </div> 
</div>

它使用Bootstrap 4 utility classes做出正確的列填充高度。

來源

2018-03-05 12:48:37 ZimSystem

引導程序中列的高度相等4

回答

更新

更新

相關問題