bootstrap 3 到 bootstrap 4 cols 不再水平对齐 [重复]

Posted 2023-03-05

【中文标题】bootstrap 3 到 bootstrap 4 cols 不再水平对齐 [重复]

【英文标题】：bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]

【发布时间】：2018-09-24 00:37:27

【问题描述】：

我正在迁移到 bootstrap 4，但是我已经将我的页面的 boostrap-min.css 从 3 换成了 4，并且我的列现在都垂直对齐，只要我能看到列是正确的。

我还使用了一个 JS fiddle 进行测试，并且能够在垂直方向上复制它们。谁能指出我正确的方向，从我如何阅读文档https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match 这应该可以工作

<div class="row">
    <div class="col-12">
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
    </div>
</div>

https://jsfiddle.net/aq9Laaew/4791/

【问题讨论】：

你不能删除col-sm-12吗？如果可以，那么这里是一个有效的fiddle

这似乎可以解决问题，你不能再嵌套列吗？

很好，很高兴它对你有用。我认为您可能需要在父列下方再添加一行才能正常工作？我确定有一些关于此的文档..

是的，给你DOCS

【参考方案1】：

删除 col-12，因为 Bootstrap 4 需要一个新的 row 才能嵌套列。

https://getbootstrap.com/docs/4.0/layout/grid/#nesting

【参考方案2】：

作为bootstrap4 grid structure is based on flexbox，你需要谨慎使用row和col网格。这里不需要.col-12 div，只需将您的.col-2 包装成一行。还将您的 .row 包装在 .container 类中

.row 
  background: #f8f9fa;
  margin-top: 20px;


.col 
  border: solid 1px #6c757d;
  padding: 10px;


.row h1 
  font-size: 20px;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
  </div>
</div>

或者如果您不想删除.col-12 div，请使用另一行来包装无用的.col-2 元素^{（只是想向您展示网格结构的概念）。}

.row 
  background: #f8f9fa;
  margin-top: 20px;


.col 
  border: solid 1px #6c757d;
  padding: 10px;


.row h1 
  font-size: 20px;

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </div>
</div>

【参考方案3】：

你应该删除第一个 col-xs-12

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-2">
    <h1>TEST</h1>
  </div>
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-4">
    <h1>TEST</h1>
  </div>
</div>

【讨论】：

我们不能再嵌套列了吗？

@AlexW 当然可以，看看我的回答