使用Bootstrap將列設置爲等高。

而我要的是箱1的高度等於將盒子3的高度，如果有要添加到盒子1個或多個文本3等（對於方框2和4同樣是相同的）。我也希望長邊的長度較短，要延長，使其與長邊的長度相同，導致兩側（綠色方塊和四個方塊組合）具有相同的高度。

更基本的是：箱子1,2,3和4都有相同的高度。如果有必要，4個盒子和綠色盒子都向下延伸到相同的高度，這樣綠色盒子的高度大約是一個小盒子高度的兩倍。

這是目前我的代碼：

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-6" id="big-box"> 
     <div class="big-box" style="/*INSERT STYLE EFFECTS HERE*/" id="big-box"> /*INSERT BIG PARAGRAPH HERE*/ 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="row"> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="firstBox">1</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="secondBox">2</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="thirdBox">3</div> 
     </div> 
     <div class="col-xs-6"> 
      <div class="mini-box" id="fourthBox">4</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

一些基本的CSS來改變文字和背景顏色等

我曾嘗試使用Javascript，引導和CSS屬性周圍playoing的樣子試圖讓這成爲可能，但到目前爲止沒有任何工作。任何幫助？

在此先感謝

來源

2015-12-22 Danny Goodall

的[我怎樣才能引導列所有相同的高度？（可能的複製HTTP ：//stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height） – halfzebra

@halfzebra我試着用那裏的答案，沒有工作，由於4盒我在左邊。：/ –

http://codepen.io/micahgodbolt/pen/FgqLc學分轉到=> ** Micah Godbolt **響應版 –

我個人不喜歡引導類的名字，但就是跑題。所以，我認爲你需要更改CSS：

.row { 
    position: relative; // set bounds for mini-box absolute. 
} 
.mini-box { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
}

來源

2015-12-22 17:39:26

我不是引導的大風扇，所以我有一個選擇， Flexbox的。父母有一個height: 200px;是所有的孩子都會對齊，但我無法修復它與第二個孩子在row。所以我height: 95px;因爲10px margin

.parent { 
 
    align-items: flex; 
 
    display: flex; 
 
    height: 200px; 
 
} 
 
row {} .child1 { 
 
    background-color: green; 
 
    color: #fff; 
 
    width: 300px; 
 
    margin: 0 10px; 
 
} 
 
.child2 { 
 
    background-color: grey; 
 
    color: #fff; 
 
    margin: 0 10px 10px; 
 
    height: 95px; 
 
} 
 
.child3 { 
 
    background-color: red; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    height: 95px; 
 
} 
 
.child4 { 
 
    background-color: pink; 
 
    color: #fff; 
 
    margin: 0 10px 10px; 
 
    height: 95px; 
 
} 
 
.child5 { 
 
    background-color: black; 
 
    color: #fff; 
 
    margin: 0 10px; 
 
    height: 95px; 
 
}

<div class="parent"> 
 
    <div class="child1">text big</div> 
 
    <div class="row"> 
 
    <div class="child2">text 1</div> 
 
    <div class="child3">text 2</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="child4">text 3</div> 
 
    <div class="child5">text 4</div> 
 
    </div> 
 
</div>

css tricks固定它的更多信息了Flexbox的

來源

2015-12-22 18:08:54 Max

使用Bootstrap將列設置爲等高。

回答

相關問題