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

Question

我正在尝试教自己如何使用引导程序有效地使事物居中。 即使阅读了很多其他SO帖子都问了同样的问题，居中还是我真正的难题。

为什么我们必须将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

第一行有12个列，您是第一个代码：

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

这意味着您排在第二个div之后，而第二个div则需要6个cols。 因此，您在第一个之后按下第二个（col-sm-push-6）

这是针对Web的，当您在计算机或手机上的网站时，屏幕的大小会有所不同。 Bootstrap使您适应屏幕。 它们是sm：用于小屏幕，lg：用于大屏幕，md：用于中间屏幕，例如标签。

Answer 2

让我为您解释。 我喜欢教初学者:-)

• 首先，当我们使用引导程序列时，它会在左右添加“ 15px”填充。 这样，我们的列在容器壁的内部看起来像“ 15px”。
• 其次，我们使用行来克服上面给出的第一种情况。
• 第三，如果您尝试对齐6和6的居中2列，则不可能这样做，因为2 col-sm-6占据了整个容器空间。
• 第四，进行引导偏移和推动特性的研发。 还可以使用代码检查器检查引导程序行和列的属性。 谢谢

Answer 3

如果您使用引导程序，则已经准备好用于构建布局的类：

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

柔性

使用全套响应式Flexbox实用工具快速管理网格列，导航，组件等的布局，对齐和大小。 对于更复杂的实现，可能需要自定义CSS 。

---

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

例如： 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>

小提琴

资料来源： 这个问题