Bootstrap 4，为什么我的 div 高度相同？答案

【问题标题】：Bootstrap 4, why my divs have the same height?Bootstrap 4，为什么我的 div 高度相同？
【发布时间】：2018-07-16 10:36:49
【问题描述】：

在我的头部，我使用了以下引导 css： https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css

在一个容器内，我有 1 行和 2 个列：

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-md-6" id="col1">ok<br>ok<br>ok<br>ok</div>
    <div class="col-xs-6 col-md-6" id="col2">ok<br>ok</div>
  </div>
</div>

我不明白为什么 #col1 和 #col2 的大小相同：

console.log($('#col1').css('height'));
console.log($('#col2').css('height'));

102 像素 102像素

【问题讨论】：

好吧，那是因为你告诉他们要一样大，伙计。此外，Bootstrap 4 alpha 已经完全过时了。切换到发布版本并在您的课程中放弃xs。
@WebDevBooster 我没有告诉他们有相同的大小，检查这个小提琴它正在做我期望jsfiddle.net/x1hphsvb/550 使用相同的 html，不过我会更新我的 bootsrap 版本，谢谢跨度>
因为它是弹性的 :)
改变 flex-strat 的对齐方式，你不会有相同的高度
您确实告诉过它们的大小相同。您为两列使用了相同的类。

标签： html twitter-bootstrap css bootstrap-4

【解决方案1】：

与 Bootstrap V3 不同，Booststrap V4 依赖于弹性盒，这只是弹性项目的默认行为。默认情况下，它们与 stretch 对齐 (align-items: stretch)。你可以阅读更多关于here的信息。

如果您不希望这种行为，只需使用引导类将对齐方式更改为 flex-start。

顺便说一句，V4 中没有col-xs-6，您可以只使用col 来简化代码：

console.log($('#col1').css('height'));
console.log($('#col2').css('height'));

.col {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col" id="col1">ok<br>ok<br>ok<br>ok</div>
    <div class="col" id="col2">ok<br>ok</div>
  </div>
</div>

【讨论】：