CSS 引导程序中的偏移量究竟是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/38716361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What exactly is offset in bootstrap?
提问by sinusGob
I do understand what is grid, basically one whole row will have 12 spaces.
我明白什么是网格,基本上一整行会有 12 个空格。
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Basically what the code above is just dividing the spaces into 3 section but what I don't understand is, whats the point of setting offset?
基本上上面的代码只是将空格分成3个部分,但我不明白的是,设置偏移量有什么意义?
<div class="col-lg-6 col-md-offset-3"></div>
回答by fu7zed
Offsets are used for spacing elements in the responsive grid.
偏移量用于在响应式网格中间隔元素。
The unit is based on the column layout.
该单位基于列布局。
You can define an offset this way : col-[breakpoint]-offset-[number of colums]
您可以通过这种方式定义偏移量: col-[breakpoint]-offset-[number of colums]
In this example, admitting our layout is made of 12 columns :
在这个例子中,承认我们的布局由 12 列组成:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>test</p>
</div>
</div>
Means that in the medium range of the grid system, the element will have a width of 6 colums and there will be 3 blank columns before the element(and as a consequence, will have 3 blank colums after).
意味着在网格系统的中等范围内,元素将有 6 列的宽度,并且元素之前将有 3 个空白列(因此,在 之后将有 3个空白列)。
The result of this is a div of 6 colums width, centered in the container.
这样做的结果是一个 6 列宽度的 div,在容器中居中。
There is a example showing how it renders in the Bootstrap documentation. https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns
Bootstrap 文档中有一个示例显示它是如何呈现的。 https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns
回答by Prathabs Durai
Offset means: Move columns to the right using the .col-md-offset-*
classes. These classes increase the left margin of a column by * columns.
偏移意味着:使用.col-md-offset-*
类将列向右移动。这些类将列的左边距增加 * 列。
For example col-md-offset-3
increases the left margin by 3 for medium devices.
例如col-md-offset-3
,将中型设备的左边距增加 3。