所以我的这一行看起来像这样：
<div class="row">
<div class="col-lg-3 col-sm-6"></div>
<div class="col-lg-3 col-sm-6"></div>
<div class="col-lg-3 col-sm-6"></div>
<div class="col-lg-3 col-sm-6"></div>
</div>
要理解这一点，基本上就是说，在大屏幕上它将有4列。
但是对于某些屏幕我不明白，它说6，所以是2列。但是当您缩小屏幕时，它也会下降到单个列。
尽管您必须将其声明为：
col-sm-12
因此，这将使其成为最小视口上的一列，然后定义col-med-6使其成为2列。
由于某种原因，当我尝试编写自己的网格布局时，我不是100％清楚。
我想念什么？
答案 0 :(得分：1)
首先，它取决于您使用的引导程序版本。在下文中，我将讨论当前版本的Bootstrap v4.1.3。
请考虑一下您的页面分为select DATEADD (DAY, DATEDIFF(DAY, 0, GETDATE()), -1) as startdate,
DATEADD (DAY, DATEDIFF(DAY, 0, GETDATE()), 0) as enddate
。正如您已经说过12 columns。这是正确的，因为如果您使用on large screens it will have 4 columns定义列，则除col-lg-3之外没有其他意思。
要形象化它，让我们看一下相应的媒体查询：
use this class if i have a large screen or a even larger screen这意味着您的页面将为每个页面// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
使用col-lg-3（4列）。
要覆盖此内容，可以使用larger 992px（6列）。看一下相应的媒体查询：
col-xl-2如果同时向元素添加// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
和col-lg-3，则页面将为屏幕col-xl-2使用4列，为屏幕between 992px and 1199px使用6列。
1）从最小的屏幕开始（首先移动设备）。您想要实现的大部分是每列下面的每列（全宽）。为此，请在您的元素中添加larger 1200px或不定义任何内容（默认为col-12）。
2）现在，只要新的col-12查询处于活动状态，就会使用此定义的类。例如，如果我们仅定义@media（或仅定义col-12 col-lg-3，它将在整个页面上使用col-lg-3)（全角列），直到达到col-12的屏幕宽度为止。 / p>
3）。在the documentation之后，您将在几天内获得专家。例如，您还可以将cols或类似的东西居中，但从基础知识入手，并尝试构建自己的引导程序页面。
我创建了一个fiddle，您可以作为一个示例：
992px <div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-3" style="background: #6502d8">
<h1>
Article 1
</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3" style="background: #02d865">
<h1>
Article 2
</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3" style="background: #d86502">
<h1>
Article 3
</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-12 col-sm-6 col-lg-3" style="background: #0275d8">
<h1>
Article 4
</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
-一整列-所有元素都在彼此之下
< 768px-两列
>= 768px && < 1200px-四列
祝你好运！