Question

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

我还使用了JS小提琴进行测试，并且能够将它们全部复制到那里垂直。任何人都可以指出我正确的方向，从如何阅读文档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/

Answer 1

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

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

Answer 2

bootstrap4 grid structure is based on flexbox ，因此您需要仔细使用row和col网格。这里不需要.col-12 div，只需将.col-2包装成一行即可。同时将.row包裹在.container类

中

＆＃13;

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}

＆＃13;

<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>

＆＃13;

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

＆＃13;

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}

＆＃13;

<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>

＆＃13;

Answer 3

你应该删除frist 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>

bootstrap 3 to bootstrap 4 cols不再水平对齐

3 个答案: