Bootstrap class col-md 没有按应有的方式拆分行

Question

我正在尝试将行（col-md-12 = 行的全宽）拆分为 3 个部分 - col-md-8 + col-md-2 + col-md-2，但是 bootstrap class col 不起作用，因为它应该和我得到 3x 列相互粘连 2 :(

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">


<!-- Body -->
<body style="background-color:gray; margin: 0">

  <div class="container-fluid" style="height: 5%; background-color: green;">
    <div>
      <div class="row form-inline">
        <div class="col-md-8" style="display: inline-block">something</div>
        <div class="col-md-2" style="display: inline-block">something2</div>
        <div class="col-md-2" style="display: inline-block">something3</div>
      </div>
    </div>
  </div>

</body>

我得到的：

我想得到的：

PS: 我知道我可以使用样式宽度 70% + 15% + 15% 但我认为这不是使用 bootstrap :/

的重点

Answer 1

假设根据您的屏幕截图，您的设备宽度似乎小于 768px。如果是这样，那么它会在您的屏幕截图中按预期工作，因为您使用的是 col-md - Read more about bootstrap's responsive breakpoints here

如果您不想让它响应，那么您应该只使用 col-{n}。阅读更多关于 Bootstrap 4 grid options

例如

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<h5> Current approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #cfcfcf;">
    <div>
        <div class="row form-inline">
            <div class="col-md-8" style="display: inline-block">col-md-8</div>
            <div class="col-md-2" style="display: inline-block">col-md-2</div>
            <div class="col-md-2" style="display: inline-block">col-md-2</div>
        </div>
    </div>
</div>
<br />
<br />
<h5> Expected approach </h5>
<div class="container-fluid" style="height: 5%; background-color: #a0a0a0;">
    <div>
        <div class="row form-inline">
            <div class="col-8" style="display: inline-block">col-8</div>
            <div class="col-2" style="display: inline-block">col-2</div>
            <div class="col-2" style="display: inline-block">col-2</div>
        </div>
    </div>
</div>

Bootstrap class col-md 没有按应有的方式拆分行

Bootstrap class col-md does not split row as it should

html

css

bootstrap-4