ブートストラップ行の中央項目

Question

ブートストラップ行に3つの要素があります。これは3つの項目のそれぞれにクラス名col-md-4を与えるだけで簡単に解決できますが、結果として書式設定の問題が発生します。

<div class="container body-content"> 

    <form class="well form-inline" style="width: 100%;"> 

    <div class="row" style="margin:auto"> 
    <div class="form-group col-md-3" style="width: 31%;"> 
     <label class="control-label">Maintenance:</label> 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
     <label>250 characters left</label> 
    </div> 

    <div class="form-group col-md-3" style="width: 31%;"> 
     <label class="control-label">Operations:</label> 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
     <label>250 characters left</label> 
    </div> 

    <div class="form-group col-md-3" style="width: 31%;"> 
     <label class="control-label">Safety:</label> 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
     <label>250 characters left</label> 
    </div> 

    </div> 


</form> 

</div> 

Here is a bootply：

は、ここに私のコードです。

これらのアイテムを正しく中央に配置するにはどうすればよいですか？私はマージンを試しましたが、彼らは本当にどこにでもいません。

Answer 1

編集：

あなたは後にしている正確に何を達成するために、親コンテナ（つまり、3 .col-md-3を保持している）にdisplay: flex; justify-content: space-between;を使用することができます。

---

あなたは、単にあなたの.col-md-3要素のそれぞれに.text-centerを追加することによってこれを行うことができます。これはすべての要素の中心になります。

あなただけではテキストエリアを中心にしたい場合は、あなたがこれを行うことができます：

<div class="text-center"><textarea class="form-control" cols="34" rows="10"></textarea></div>

Answer 2

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container body-content"> 
 

 
    <form class="well form-inline text-center" style="width: 100%;"> 
 

 

 

 
    <div class="row" style="margin:auto"> 
 
    <div class="form-group col-md-3" style="float:none"> 
 
     <label class="control-label">Maintenance:</label> 
 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
 
     <label>250 characters left</label> 
 
    </div> 
 

 
    <div class="form-group col-md-3" style="float:none"> 
 
     <label class="control-label">Operations:</label> 
 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
 
     <label>250 characters left</label> 
 
    </div> 
 

 
    <div class="form-group col-md-3" style="float:none"> 
 
     <label class="control-label">Safety:</label> 
 
     <textarea class="form-control" cols="34" rows="10"></textarea> 
 
     <label>250 characters left</label> 
 
    </div> 
 

 
    </div> 
 

 

 
</form> 
 

 
</div>

は、親コンテナ内のテキスト・センターを追加します。 フルスクリーンモードで表示します。

<form class="well form-inline text-center" style="width: 100%;"> 

また、col-md-3には浮動小数点が付きます。 これは、divにcol-md-3とstyle = "float：none"を追加することで実現します。

<div class="form-group col-md-3" style="float:none"> 

Answer 3

すべての要素で100％幅を設定すると、ラベル、テキストエリアを意味します。 col-md-3をcol-md-4に変更します。以下はコードスニピットです。

<div class="container body-content"> 

    <form class="well form-inline" style="width: 100%;"> 

    <div class="row" style="margin:auto"> 
    <div class="form-group col-md-4" > 
     <label class="control-label" style="width:100%;" >Maintenance:</label> 
     <textarea class="form-control" rows="10" style="width:100%;" ></textarea> 
     <label style="width:100%;" >250 characters left</label> 
    </div> 

    <div class="form-group col-md-4" > 
     <label class="control-label" style="width:100%;">Operations:</label> 
     <textarea class="form-control" rows="10" style="width:100%;" ></textarea> 
     <label style="width:100%;" >250 characters left</label> 
    </div> 

    <div class="form-group col-md-4" > 
     <label class="control-label" style="width:100%;">Safety:</label> 
     <textarea class="form-control" rows="10" style="width:100%;" ></textarea> 
     <label style="width:100%;" >250 characters left</label> 
    </div> 

    </div> 


</form> 

</div> 

Answer 4

これを試してみてください。

<div class="container"> 

    <form> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="form-group"> 
      <label>Maintenance:</label> 
      <textarea class="form-control" cols="34" rows="10"></textarea> 
      <label>250 characters left</label> 
      </div> 
     </div> 
     <div class="col-md-4"> 
      <label>Operations:</label> 
      <textarea class="form-control" cols="34" rows="10"></textarea> 
      <label>250 characters left</label> 
     </div> 
     <div class="col-md-4"> 
      <label>Safety:</label> 
      <textarea class="form-control" cols="34" rows="10"></textarea> 
      <label>250 characters left</label> 
     </div> 
    </div> 
</form> 

</div> 

ここはリンクです。 http://www.bootply.com/tvCIHTOdAE#