如何使引导程序的左列填充到屏幕的整个高度？答案

【问题标题】：How to make the left column of bootstrap fill to the entire height of the screen?如何使引导程序的左列填充到屏幕的整个高度？
【发布时间】：2019-03-12 15:21:26
【问题描述】：

我在引导模板的帮助下创建了一个网站。当行被分成两列时用 col-sm-4 和 col-sm-8。 col-sm-4 中的内容不会将整个屏幕带到页脚。但是第二列占据了整个屏幕。谁能建议如何将整个屏幕移到左列？下面是小提琴。看完你就明白我在说什么了。 https://jsfiddle.net/he35pj0n/2/

<div class="container">
  <div class="row">
    <div class="col-sm-4" style="background-color:cyan">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8"  style="background-color:yellow">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

【问题讨论】：

您使用的是哪个版本的 Bootstrap？
我使用的是 3.4.0。其实我直接用了链接maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
确保你不要用bootstrap-4标记它
是的，我正在搜索引导标题。我没找到。所以我在这里使用了这个标签
@MAKHAMNAGABHAVANI，可能与stackoverflow.com/questions/19695784/…重复

标签： html twitter-bootstrap

【解决方案1】：

要达到预期的效果，请使用以下使用 flex 的选项

.row{
  display: flex
}

.row > div {
  display: flex;
  flex-direction: column;
}

codepen - https://codepen.io/nagasai/pen/RdjrZm

更多选项请参考此链接 - How can I make Bootstrap columns all the same height?

【讨论】：