54

Bootstrap 3 で行 (12 列) を中央に配置する方法は? 使いたくないoffset

私はこの方法を使用していますが、うまくいきません。

    .col-centered{
        float: none;
        margin: 0 auto;
    }
    <div class="row" style="max-width: 300px;">
        <div class="col-md-12 col-xs-12 col-centered">
            <div class="input-group">
                <div class="input-group-btn">
                    <button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        All Items 
                                    <span class="caret"></span>
                    </button>
                    <ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
                        <li><a href="#"> Test 1 </a></li>
        <li><a href="#"> Test 2 </a></li>
        <li><a href="#"> Test 3 </a></li>
        <li><a href="#"> Test 4 </a></li>
                    </ul>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">
                        <i class="fa fa-search"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>

これに対する解決策はありますか？この作品の構想はありません。

4

13 に答える 13

63

なぜグリッドシステムを使用しないのですか?

ブートストラップ グリッド システムは 12 列で構成されているため、「中」の列を使用すると、970 ピクセルの幅のサイズになります。

次に、それを 3 列 (12/3=4) に分割できるので、「col-md-4」クラスで 3 つの div を使用します。

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

それぞれの最大幅は 323px です。最初と最後を空のままにして、真ん中のものを使用してコンテンツを中央に配置します。

<div class="col-md-4"></div>
<div class="col-md-4">
   <p>Centered content.</p>
</div>
<div class="col-md-4"></div>
于 2014-03-01T12:11:54.560 に答える
58

margin: auto を全幅の列に適用しているため、あなたがしていることは機能していません。

それをdivで囲み、それを中央に配置します。例えば：

<div class="i-am-centered">
  <div class="row">...</div>
</div>

.

.i-am-centered { margin: auto; max-width: 300px;}

http://www.bootply.com/93751

とにかく、より表現力があり、通常はグリッドをいじりたくないので、よりクリーンなソリューションです。

于 2013-11-12T22:52:33.803 に答える
20

それ以外の

<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>

あなたはただ使うことができます

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

列 1 と 3 に何も必要ない限り、これはより洗練されたソリューションです。オフセットにより、前に 4 つの列が「追加」され、後に 4 つの「予備」が残ります。

PS最初の質問ではオフセットが指定されていないことを認識していますが、少なくとも1つの以前の回答では、オフセットを使用する場合に不要なCSSハックが使用されています。完全を期すために、これは有効だと思います。

于 2015-10-13T08:41:54.023 に答える
10

空の列を追加せずにグリッド システムを使用できます

<div class="col-xs-2 center-block" style="float:none"> ... </div>

レイアウトに合わせてcol-xs-2を変更します。

プレビューをチェック: http://jsfiddle.net/rashivkp/h4869dja/

于 2014-05-13T08:01:44.057 に答える
6

テキストセンタークラスを使用するだけです

 <div class="row">
     <div class="col-md-12">
          <h3 class="text-center">Here Comes your Text</h3>
     </div>
 </div>
于 2016-04-25T11:22:44.877 に答える
4

これを試してください、うまくいきます！

<div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</div>
        </div>
    </div>
</div>

次に、css でドキュメントの中央の div と中央の幅を定義します。

.center {
    margin: 0 auto;
    width: 80%;
}
于 2015-04-04T13:17:51.160 に答える
-2

私はこのコードの平和を使用し、成功しました

<div class="row  center-block">
<div style="margin: 0 auto;width: 90%;"> 
    <div class="col-md-12" style="top:10px;">
    </div>
    <div class="col-md-12" style="top:10px;">
    </div>
 </div>

于 2015-11-09T19:38:12.343 に答える