html - 连续居中两个 col-sm-6 + 一些基本的 boostrap 混淆

Question

我正在尝试自学如何使用 bootstrap 有效地居中。居中是我真正纠结的事情，即使在阅读了大量其他 SO 帖子后也提出了同样的问题。

为什么我们必须将列包装成一行，然后将该行包装在一个容器中？这实际上有什么作用？

body {
  background-color:pink;
}
    
.container {
  overflow: hidden;
  background-color: yellow;
}

.col-sm-6 {
  float: left;
  height: 100px;
  width: 100px;
  background-color: blue;
  padding: 10px;
  margin: 1%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container">
  <div class = "row">
  <div class = "col-sm-6"></div>
  <div class = "col-sm-6"></div>
  </div>
</div>

JSFiddle

Answer 1

1 行有 12 列，你是第一个代码:

<div class = "container">
  <div class = "row">
  <div class = "col-sm-6"></div>
  <div class = "col-sm-push-6"></div>
  </div>
</div>

这意味着您的第二个 div 位于第一个占用 6 列的 div 之后。所以你在第一个之后推第二个 (col-sm-push-6)

这是针对网络响应的，当你的网站在电脑或手机上时，屏幕有不同的尺寸。 Bootstrap 使您适应屏幕。它们是 sm:用于小屏幕，lg:用于大屏幕，md:用于中间屏幕，例如标签。