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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 12:04:19  来源:igfitidea点击:

What exactly is offset in bootstrap?

csstwitter-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-3increases the left margin by 3 for medium devices.

例如col-md-offset-3,将中型设备的左边距增加 3。