了解引导程序的网格断点
[英] Understanding bootstrap's grid breakpoints
本文介绍了了解引导程序的网格断点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我的这一行看起来像这样:
<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>
所以要理解这一点，它基本上是说，在大屏幕上，它将有 4 列.
但对于某些屏幕，我不明白，它显示 6，因此是 2 列.但是当你缩小屏幕时，它也会变成一列.
虽然你必须将其声明为:
col-sm-12
这样就可以使它在最小视口上成为单列，然后定义 col-med-6 使其成为 2 列.
出于某种原因，我在尝试编写自己的网格布局时并不是 100% 清楚.
我错过了什么?
解决方案
基础知识
首先，这取决于您使用的引导程序版本.下面我将谈谈当前版本的bootstrap v4.1.3.
想想你的页面分为 12 列.正如您已经说过的在大屏幕上它将有 4 列.这是正确的，因为如果您使用 col-lg-3 定义列，则意味着 如果我有一个大屏幕或更大的屏幕，请使用这个类.
为了形象化，让我们看一下相应的媒体查询:
//大型设备(桌面，992px 及以上)@media(最小宽度:992px){ ... }
这意味着您的页面将为每个页面使用 col-lg-3(4 列)更大的 992px.
要覆盖它，您可以使用 col-xl-2(6 列).看看相应的媒体查询:
//超大设备(大型桌面，1200px 及以上)@media(最小宽度:1200px){ ... }
如果您将 col-lg-3 和 col-xl-2 附加到您的元素，您的页面将使用 4 列用于屏幕 介于 992px 和 1199px 之间 和 6 列用于屏幕更大的 1200px.
如何开发我的应用程序(示例)
1) 从最小的屏幕开始(移动优先).您想要实现的主要是每列下方的每一列(全宽).要实现此目的，请将 col-12 添加到您的元素中或不定义任何内容(col-12 是默认值).
2) 现在只要新的 @media 查询处于活动状态，就会使用这个定义的类.例如，如果我们只定义 col-12 col-lg-3(或只定义 col-lg-3)，它将使用 col-12(全宽列)直到我们达到 992px 的屏幕宽度.
3) 试试吧.按照文档，您将在几天内获得专家.例如，您也可以将 cols 或一些类似的东西居中，但从基础开始并尝试构建自己的引导页面.
我创建了一个 fiddle，您可以将其作为起始示例:
<div class="row"><div class="col-12 col-sm-6 col-lg-3" style="background: #6502d8"><h1>第1条<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.</p>
<div class="col-12 col-sm-6 col-lg-3" style="background: #02d865"><h1>第二条<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.</p>
<div class="col-12 col-sm-6 col-lg-3" style="background: #d86502"><h1>第三条<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.</p>
<div class="col-12 col-sm-6 col-lg-3" style="background: #0275d8"><h1>第四条<p>Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.Lorem ipsum dolor sat amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam voluptua.在 vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren，无海 takimata sanctus est Lorem ipsum dolor 坐 amet.</p>
<代码><768px - 一个全宽列 - 所有元素都在彼此下方
>= 768px &&<1200px - 两列
>= 1200px - 四列
祝你好运！
So I have this row that looks like this:
<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>
So to understand this it is basically saying, on large screens it will have 4 columns.
But for some screens I don't get it, it says 6 so that is 2 columns. But it also goes down to a single column when you shrink the screen.
I would have though you have to declare it as:
col-sm-12
So that would make it a single column on the smallest viewport, and then define col-med-6 to make it 2 columns.
For some reason I am not 100% clear when trying to write my own grid layout.
What am I missing?
解决方案
Basics
First of all it depends on the bootstrap version you are using. In the following i will talk about the current version bootstrap v4.1.3.
Think about your page divided in 12 columns. As you already said on large screens it will have 4 columns. That's correct because if you define columns with col-lg-3 means nothing else than use this class if i have a large screen or a even larger screen.
To visualize it let's have a look at a corresponding media query:
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
This means your page will use col-lg-3 (4 columns) for every page larger 992px.
To override this you can use col-xl-2 (6 columns). Have a look at the corresponding media query:
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
If you append both col-lg-3 and col-xl-2 to your elements your page will use 4 columns for screens between 992px and 1199px and 6 columns for screen larger 1200px.
How to develop my application (Example)
1) Start with your smallest screen (mobile first). What you want to achieve are mostly each column (full width) below each column. To achieve this add col-12 to your elements or define nothing (col-12 is default).
2) This defined class will now used as long as a new @media query got active. For example if we only define col-12 col-lg-3 (or only col-lg-3) it will use col-12 (full width columns) for the whole page until we reach a screen width of 992px.
3) Just try around. Following the documentation you will get an expert in days. For example you can also center cols or some stuff like this but start with the basics and try to build your own bootstrap page.
I have created a fiddle that you can take as a starting example:
<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 - one full width column - all elements below each other
>= 768px && < 1200px - two columns
>= 1200px - four columns
Good luck!
这篇关于了解引导程序的网格断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
