html - 使用 col 类的 Bootstrap 问题

Question

我使用了 bootstrap 提供的 col 类来使我的网站响应，但列不起作用并充当行。我以前用过两次列方法，它总是有效

我已经在网上搜索过但找不到任何有效的答案

这是我的 HTML 代码:

.h85 {
  height: 85vh;
}

.row {
  border-bottom: solid 2px black;
  border-top: solid 2px black;
  margin: 2vh;
}

[class*="col-"] {
  border-right: solid 2px greenyellow;
  border-left: solid 2px greenyellow;
}

.container {
  border: solid 3px red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container h85" id="journalier">journalier
  <div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-4" id="repas-journalier">5</div>
    <div class="col-lg-2" id="star">7</div>
    <div class="col-lg-4" id="sport-journalier">11</div>
    <div class="col-lg-1">12</div>
  </div>
</div>

作为输出我得到了这个，这不是我尝试的

感谢帮助

Answer 1

您的代码似乎有效，但列断点将仅适用于至少 1200 像素的屏幕，因为您使用的是 col-lg-。供引用:

Bootstrap 4
超小号 (col-) < 576px
小 (col-sm-) ≥ 576px
中 (col-md-) ≥ 768px
大 (col-lg-) ≥ 992px
超大 (col-xs-) ≥ 1200px

Bootstrap 3
超小 (col-xs-) < 768px
小型设备 (col-sm-) ≥ 768px
中型设备 (col-md-) ≥ 992px
大型设备 (col-lg-) ≥ 1200px