Bootstrap中的偏移列

mctunoxg  于 2022-12-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(113)

这就是我想做的事情:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-4"></div>
        <div class="col-sm-2"></div>
    </div>
</div>

如何使用偏移量?

busg9geu

busg9geu1#

偏移量的工作原理类似于将保留在列之前的空白列。例如,如果您希望列的大小为屏幕的一半,并且正好位于中间,则必须执行以下操作:

<div class="col-sm-6 col-sm-offset-3"></div>

一整行有12列。这样你将有6列(行的一半)和3列的偏移量。它将正好在屏幕的中间。
请查看Bootstrap文档。

iugsix8n

iugsix8n2#

在**Bootstrap 3中,**就像这样..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

http://www.codeply.com/go/7wofwfzrH3
Bootstrap 4中,就像这样..

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 offset-sm-2"></div>
        <div class="col-sm-4"></div>
    </div>
</div>

https://www.codeply.com/go/t5DTGwero8

blmhpbnm

blmhpbnm3#

以上对我来说不起作用,因为 * 我认为 * 引导类略有变化。

<div class="col-md-4 offset-md-2">

对我有用。
希望这能帮上忙
戴夫

m0rkklqb

m0rkklqb4#

我正在使用bootstrap 3。下面的代码是为我的工作转移div的权利。

<div class="col-lg-4 offset-lg-4"></div>
wsewodh2

wsewodh25#

在Bootstrap 5中,你可以这样使用。但是请注意,偏移量是用于左边距对齐的。如果你想用左边距对齐项目。你可以使用偏移量类。Bootstrap 5中有两种类型的偏移量。第一种是从1-12偏移量,第二种是响应类,如偏移量-sm偏移量-lg偏移量-md。它看起来像这样。

<div class="col-sm-2 offset-sm-2"></div>
    <div class="col-sm-4 offset-sm-4"></div>
    
</div>

相关问题