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％

回答

相关问题