使用col类的引导问题

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

您的代码似乎可以工作，但是列断点将仅适用于至少1200px的屏幕，因为您使用的是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

Answer 2

我怀疑您是否以错误的方式导入bootstrap.css，可以再次检查路径。

但这是快速解决方案：

.row{
   border-bottom: solid 2px black;
   border-top: solid 2px black;
   margin: 2vh;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: cennter;
   flex-wrap: unset;
}

Answer 3

我认为您需要使用所有断点。

尝试中等分辨率：

<div class="row">
      <div class="col-lg-1 col-md-1">1</div>
      <div class="col-lg-4 col-md-4" id="repas-journalier">5</div>
      <div class="col-lg-2 col-md-2" id="star">7</div>
      <div class="col-lg-4 col-md-4" id="sport-journalier">11</div>
      <div class="col-lg-1 col-md-1">12</div>
</div>

然后，如果您使用引导程序4，则需要为所有断点添加col-lg-1 col-md-1 col-sm-1或col-1。

Answer 4

尝试一下：

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link  rel="stylesheet"  href="accueil.css">
<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>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

尝试全屏显示。