中心两个Col-SM-6连续 一些基本的Boostrap混乱

Question

我试图教自己如何使用bootstrap有效地居中事物。居中是我真正挣扎的事情，即使阅读了大量其他人，所以帖子问同样的问题。

为什么我们必须连续包裹Cols，然后将该行包裹在容器中？这实际上是做什么的？

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个COLS，您是第一个代码：

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

这意味着您是第二次DIV，是第一个获得6个COLS的人。因此，您在第一个（Col-SM-Push-6）之后推第二

这是针对网络响应的，当您网站在计算机上或手机中时，屏幕的大小不同。Bootstrap Adapt您将您分配到屏幕上。它们是SM：对于小屏幕，LG：对于大屏幕和MD：对于中间屏幕，就像一个选项卡一样。

Answer 2

让我为您解释。我喜欢教初学者： - ）

• 首先，当我们使用Bootstrap列时，它会从中添加" 15px"填充右边和左边。这样，我们的专栏看起来像是内部的" 15px"容器墙。
• 其次，我们使用行来克服上面的第一个情况。
• 第三，如果您要对6和6的2列对齐2栏占据整个容器空间。
• 第四次关于引导偏移和推动属性的R＆amp; d。还可以使用代码Inspector检查Bootstrap行和列属性。谢谢

Answer 3

如果您使用bootstrap，则可以准备构建布局：

https://getbootstrap.com/docs/4.0/utilities/flex/

flex

迅速管理网格列，导航，组件等的布局，对齐和尺寸，以及一套响应式Flexbox实用程序。对于更复杂的实现，可能需要自定义CSS 。

---

如果您需要固定宽度的col，您可能需要在此处创建自己的类。

示例：https：//jsfiddle.net/clw2ajro/7/

body {
  background-color: pink;
}
.container {
  overflow: hidden;
  background-color: yellow;
}
.mycol {
  background-color: blue;
  height:100px;
  flex:0 0 100px
}

<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 d-flex flex-nowrap justify-content-center">
    <div class="mycol m-2 p-4"></div>
    <div class="mycol m-2 p-4"></div>
  </div>
</div>

Answer 4

尝试此

CSS：

body {
    background-color:pink;
}
.row-centered {
    display:block;
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
}
 .container {
    overflow: hidden;
    background-color: yellow;
}
.col-sm-6 {
    height: 100px;
    max-width:100px;
    background-color: blue;
    padding: 10px;
    margin: 1%;
}

html

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

小提琴

来源：这个问题