Bootstrap - 將行的高度設置爲行高的100％

我有一行包含兩列，我希望行中的兩個單元格的高度相同。在屏幕截圖中，左側單元格比右側更小，因此我希望該單元格的高度與行相同。問題是，其中一個單元可能比它的鄰居大。Bootstrap - 將行的高度設置爲行高的100％

例與藍線以指示空間應該由： Screenshot of difference

行的片段是：

<div class="row center-block"> 
    <div class="col-sm-4"> 
     <div class="well-menu"> 
      <ul class="nav"> 
       <li> 
        <a title="Home" href="/">Home</a> 
       </li> 
       <li> 
        <a title="Contact" href="#">Contact</a> 
       </li> 
       <li> 
        <a title="Parent Portal" href="#">Parent Portal</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div class="visible-xs-block padding-top-10"></div> 
    <div class="col-sm-8"> 
     <div id="subscribe-box" class="well-menu"> 
      <form action="#"> 
       <div class="input-group"> 
        <h3>Subscribe to our newsletter:</h3> 
        <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required> 
        <button class="btn btn-info btn-lg" type="submit">Submit</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div>

造型：

.well-menu { 
    padding: 0 18px; 
    line-height: 42px; 
    background-color: rgba(0, 0, 0, 0.1); 
    border-radius: 7px; 
    background-clip: padding-box; 
    box-shadow: 0 1px 0px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(0, 0, 0, 0.5); 
} 
.well-menu>.nav>li { 
    float: left; 
    margin: 0; 
} 
.well-menu>.nav>li:first-child>a{ 
    margin: 0 10px 0 0; 
} 
.well-menu>.nav>li:last-child>a{ 
    margin: 0 0 0 10px; 
} 
.well-menu>.nav>li>a{ 
    position: relative; 
    display: inline; 
    color: #DBDDDD; 
    padding: 0; 
    margin: 0 10px; 
    background: transparent; 
} 
.well-menu > .nav > li > a:hover{ 
    color: #fff; 
    text-decoration: none; 
} 
.well-menu>.nav>li:not(:first-child):before{ 
    display: inline-block; 
    content: "\2022"; 
    float: left; 
    margin: 0 2px; 
    color:#DBDDDD !important; 
}

來源

2015-05-20 Josh Luke Blease

可能重複[如何使Bootstrap列高度相同？]（http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-高度） –

@MaksymStepanenko這不起作用，我已經將導航列表和「井式菜單」的高度設置爲100％ –

我想舉有一個row-eq-height類可以添加到包含這兩列的div秒。

編輯：這裏是一個鏈接

http://getbootstrap.com.vn/examples/equal-height-columns/

來源

2015-05-20 13:42:21 kburlz

由於某種原因，這沒有奏效，但我更新了我的問題並添加了在一些CSS中看看它是否更清楚我的問題。 –

另外，我只是提到這一點...我確定改變你的項目框架是不現實的，但如果有任何機會，我會使用Foundation框架而不是Bootstrap。它有一個「均衡器」來處理這個確切的問題。 – kburlz

爲了使自舉列行

後續的代碼添加到部分的100％高度：

.row { 
    display: table; 
} 

.row [class*="col-"] { 
    float: none; 
    display: table-cell; 
    vertical-align: top; 
}

這是一個重複的問題，我想讚揚popnoodles教我如何做到這一點。希望這有助於！

來源

2015-06-14 10:19:49 Catto

Bootstrap - 將行的高度設置爲行高的100％

回答

相關問題