Bootstrap 使一列等于两列的高度

Question

我正在尝试使右侧的列与左侧的两列高度相同。我知道我可以通过将每一面包装成自己的一列来做到这一点，但是随着 window 变小，我想保持它们现在的顺序。如果我把它们放在一个单独的col中，那么右边的col会到底部而不是中间。

我查看了 bootstrap 文档，但我认为他们没有添加此功能。无论如何，你知道这是可能的吗？它不必 bootstrap 但必须与大多数现代浏览器兼容。

这是一个例子

.container div{
  border: 1px solid black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>

    <div class="col-sm-12 col-md-8">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
      Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
      sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
      laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
      
    <div class="col-sm-12 col-md-4">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.</div>
  </div>
</div>

Answer 1

对于需要同时垂直和水平对齐的情况，可以使用 CSS Grid Layout。这允许您定义 2D 网格并将元素放置到该网格上。我还没有深入了解 Bootstrap 4 以了解它是否具有对网格布局的先天支持，但这里有一个小演示。我把它作为练习留给你，让它响应小屏幕。

.content {
  padding: 0.5rem;
  margin: 2px;
}

.top {
  border: 1px solid red;
}

.middle {
  border: 1px solid blue;
}

.bottom {
  border: 1px solid green;
}

.row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
}

.middle {
  grid-column: 2;
  grid-row: 1 / span 2;
}

<div class="container">
  <div class="row">
    <div class="content top">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,quis ultrices lectus magna ut ipsum.</div>

    <div class="content middle">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper.
      Donec sodales dignissim massa eget commodo. Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis
      sit amet lacus facilisis, ut aliquam massa auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac
      laoreet tincidunt, leo tellus venenatis est, quis ultrices lectus magna ut ipsum.</div>
      
    <div class="content bottom">Sed eu fringilla orci. Fusce lobortis ligula quis eros tincidunt, id scelerisque dui gravida. Aliquam vulputate enim eget justo ullamcorper, ac posuere sapien consectetur. Donec egestas nunc id finibus semper. Donec sodales dignissim massa eget commodo.
      Proin vestibulum neque id suscipit scelerisque. Mauris leo odio, volutpat vel augue eu, dapibus cursus eros. Quisque et facilisis nisi, id molestie leo. Donec non placerat justo. Integer faucibus felis sit amet lacus facilisis, ut aliquam massa
      auctor. Proin ut ligula luctus, iaculis tellus sit amet, vestibulum lectus. In vehicula laoreet leo sed sodales. Curabitur nisi leo, volutpat nec placerat id, laoreet ac eros. Vivamus aliquam, lectus ac laoreet tincidunt, leo tellus venenatis est,
      quis ultrices lectus magna ut ipsum.</div>
  </div>
</div>

Bootstrap 使一列等于两列的高度

Bootstrap making one col equal the height of two cols

html

css

twitter-bootstrap

height