Question

我正在使用Bootstrap作为网格系统，我无法使col-6具有高度：100％，以便垂直对齐其中的一些文本。

<div class="row">
    <div class="col-lg-6 col-sm-12 center ">
        <img alt=" " class="img-responsive" src="assets/images/sitewide/mainpageeconomy.jpg">
    </div>
    <div class="col-lg-6 col-sm-12 fillme">
        <p>We also offer a 30 foot Grady White center console. She's more of a hardcore no frills fishing vessel, we normally take her 20 to 40 miles offshore for bottom fishing and trolling for game fish up to 4 anglers.</p>
    </div>
</div>

fillme类的高度和最小高度为100％

非常感谢帮助。

更新 - 我写了blog post这个！绝对是一个很方便的代码。

Answer 1

分配给元素的百分比高度或宽度只会使其成为其父元素的百分比大小，而不是整个浏览器窗口的百分比大小。如果父级没有分配高度或宽度，则具有百分比值的子元素不起作用。

确保父div元素也包含高度值。

编辑：

在您的情况下，您可以使用位置魔术来达到您想要的结果：

CSS：

.row {
  margin-right: -15px;
  margin-left: -15px;
  position: relative;
}

.fillmeright {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.fillmeleft {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
}

只需将fillme类替换为相应的fillmeright或fillmeleft。

Answer 2

你可以这样做

.col-lg-6 {    
    width: 49% !important;
    display: inline-block;
    float: none !important;
    vertical-align: middle;    
}

Answer 3

给你的父行＆＃39; .fillme＆＃39; class，从col-lg-6中删除该类，并将其包含在内：

.fillme{
    display: flex;
    align-items: center;
}

欢呼，k

Div高度100％不工作 - 自举

3 个答案: