web-dev-qa-db-ja.com

センタリングBootstrap入力フィールド

私はこれで新しいです。特にブートストラップで。私はこのコードを持っています：

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

On webpage it looks like this
この入力フィールドとボタンをページの中央に配置する必要があります... "margin-left：auto; margin-right：auto;"働いていない...誰かがアイデアを持っていますか？

htmlcsstwitter-bootstraptwitter-bootstrap-3
52
Ivan Vulović

オフセットを使用して、列を中央に表示することができます。行の残りのサイズの半分に等しいオフセットを使用するだけです。あなたの場合、col-lg-4をcol-lg-offset-4とともに使用することをお勧めします。これは(12-4)/2です。

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

デモフィドル

この手法は偶数列サイズ（.col-X-2、.col-X-4、col-X-6など）でのみ機能することに注意してください。任意のサイズをサポートする場合はmargin: 0 auto;を使用できますが、要素からフロートを削除する必要があるため、カスタムをお勧めします次のようなCSSクラス：

.col-centered{
    margin: 0 auto;
    float: none;
}

デモフィドル

107
koala_dev

このスタイルをdiv class="input-group"に適用してみてください：

text-align:center;

表示： Fiddle 。

8
gsubiran

要素を中央に配置する最良の方法は、.center-blockヘルパークラスを使用することです。ただし、bootstrapバージョンは.1.1以上でなければなりません

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->
6
Shwan Namiq

わかりました、これは私にとって最良の解決策です。 Bootstrapには、デバイスまたはビューポートのサイズの増加に応じて最大12列まで適切にスケールするモバイルファーストの流体グリッドシステムが含まれます。したがって、これはすべてのブラウザーとデバイスで完全に機能しました：

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

これは4 + 4 + 4 = 12 ...を意味するため、2番目のdivはそのように中央になります。

例： http://jsfiddle.net/jpGwm/embedded/result/

4
Ivan Vulović

私にとって、このソリューションは、TDの入力フィールドを中央に配置するのに役立ちました。

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>
3
Cagy79

このコードを使用してみてください：

.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

機能しない場合は、！importantを使用してください

2
RDK