60

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

この入力フィールドとボタンをページの中央に配置する必要があります。

これはうまくいきませんでした："margin-left: auto; margin-right:auto;"

ウェブページでは、このように見えます

誰にもアイデアはありますか？

4

10 に答える 10

10

要素を中央に配置する最良の方法は、.center-blockヘルパー クラスを使用することです。ただし、ブートストラップのバージョンが3.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 -->

于 2015-11-28T10:10:23.527 に答える
4

私にとって、このソリューションは、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>

于 2015-12-07T22:26:18.910 に答える
2

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

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

うまくいかなかった場合は !important を使用してください

于 2013-08-03T19:18:19.433 に答える