web-dev-qa-db-ja.com

Bootstrapのオフセット列

これは私がやりたいことのアイデアです：

<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>

オフセットを使用するとどのように機能しますか？

htmltwitter-bootstrapoffset
14
sumguy

オフセットは、列の前に残る空白の列のように機能します。たとえば、画面の半分のサイズで、ちょうど中央にある列が必要な場合は、次の操作を行う必要があります。

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

行全体には12列あります。この方法では、6列（行の半分）と3列のオフセットがあります。画面の真ん中になります。

Bootstrap documentationをご覧ください。

22
Luiz Henrique

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/7wofwfzrH

InBootstrap 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

7
Zim

私は思う bootstrapクラスがわずかに変更されたので、上記は私には機能しません。

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

私のために働く。

お役に立てれば

デイブ

1
demsley