代码之家 › 专栏 › 技术社区 › Reece

Bootstrap使一个COL等于两个COLs的高度

height twitter-bootstrap css html

Reece · 技术社区 · 6 年前

我正设法使右边的柱子和左边的柱子一样高。我知道我可以把每一面都包装成一列,但是随着窗户越来越小,我想把它们按现在的顺序排列。我若把他们放在自己的山冈上,右边的山冈就要下到山冈,不到中间。

我已经看过了引导文档,但我不认为他们添加了这个特性。你知道这有可能吗?它不必是引导程序,但必须与大多数现代浏览器兼容。

这里有一个例子

.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 回复 | 直到 6 年前

Auroratide 6 年前

对于需要同时进行垂直和水平对齐的情况,可以使用 CSS Grid Layout . 这允许您定义二维网格并将元素放置到该网格上。我对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>