Question

我试图教自己如何使用bootstrap有效地集中事物。即使在阅读了大量提出同样问题的其他SO帖子之后，我也很难解决这个问题。

为什么我们必须将cols包装成一行，然后将该行包装在容器中？这实际上是做什么的？

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

JSFiddle

Answer 1

1行有12个cols为你＆＃39;第一个代码：

＆＃13;

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

＆＃13;

这意味着你的第二个div是在第一个接受6个cols的人之后。所以你在第一个之后推动第二个（col-sm-push-6）

这是针对网络响应的，当您的网站位于计算机或移动电话上时，屏幕大小不同。 Bootstrap使您适应屏幕。他们是sm：对于小屏幕，lg：对于大屏幕和md：对于中间屏幕，如标签，例如。

Answer 2

让我为你解释一下。我喜欢教初学者： - ）

首先，当我们使用bootstrap列时，它会添加'15px'填充右边和左边。通过这种方式，我们的列看起来像'15px' 容器壁。
其次我们使用row来克服上段给出的第一种情况。
第三，如果你试图对齐6和6的中心2列，那么就不可能这样做，因为2 col-sm-6 占据整个集装箱空间。
第四，关于bootstrap偏移和推送属性。还可以使用代码检查器检查bootstrap行和列属性。谢谢

Answer 3

如果您使用bootstrap，则可以使用类来构建布局：

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

<强>的Flex

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

如果你需要固定宽度的cols ，你可能需要在这里创建自己的类 。

例如：https://jsfiddle.net/cLw2ajro/7/

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

试试这个

CSS：

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

HTML

if [ condition ]; then
    <commands>
elif [ condition ]; then
     <commands>
else
     <commands>
fi

Fiddle

来源：This question

中心两个col-sm-6连续+一些基本的助推器混乱

4 个答案: