Bootstrap 使一列等于两列的高度

Posted 2023-03-06

【中文标题】Bootstrap 使一列等于两列的高度

【英文标题】：Bootstrap making one col equal the height of two cols

【发布时间】：2018-12-01 21:06:08

【问题描述】：

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

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

这是一个例子

.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>

【参考方案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>