Div高度100％无法正常工作 - Bootstrap

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％的高度和最小高度。

非常感谢帮助。

更新- 我写了一篇博客文章关于这个！绝对是一个很好的代码片段。

- user3196599

---

Lochemage的下面的回答是正确的。如果你想让.fillme的高度与其父元素相同，你需要在父元素上设置一个高度。添加.row { height: 500px;}将解决问题的这一部分。 - cjspurgeon

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即可。

- Lochemage

---

谢谢您的回答，如果我设置了一个高度，我将不得不使用媒体查询进行调整，那么使用js/jquery会更好吗？ - user3196599

Answer 2

你可以这样做

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

- Bojan Petkovski

---

太棒了，谢谢！编辑：你能解释一下吗？这应该是一个内置的类来引导！干得好！！ - user3196599

很遗憾，您不能将.col-lg-6用作“仅在大屏幕上”，它被视为一个类 ;) - user3196599

通过使用display:inline-block和vertical-align:middle，您可以使 .row的两个.col-lg-6 div垂直居中对齐。父元素的高度将由高度更大的元素决定，例如图片，在父元素中的可用空间内，文本div将被垂直对齐。因为浮动元素无法垂直对齐，所以我们需要删除bootstrap添加的浮动效果。 - Bojan Petkovski

Answer 3

给你的父行添加 '.fillme' 类，从 col-lg-6 中删除该类，并将其设置为以下内容：

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

谢谢，k

- Kresimir Pendic