Zentrale Elemente in Bootstrap Zeile

Question

Ich habe 3 Elemente in einer Bootstrap-Zeile. Dies kann einfach gelöst werden, indem Sie jedem der 3 Elemente einen Klassennamen col-md-4 geben, aber das führt zu Formatierungsproblemen.

Hier ist mein Code:

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

Wie zentriere ich diese Elemente richtig? Ich habe Margen ausprobiert, aber sie bekommen mich wirklich nirgendwohin.

Answer 1

Edit:

können Sie display: flex; justify-content: space-between; auf den übergeordneten Container verwenden (das hält die 3 .col-md-3) genau zu erreichen, was Sie wollen.

---

Sie können dies tun, indem Sie einfach .text-center jedem Ihrer .col-md-3 Elemente hinzuzufügen. Dies wird alle Elemente zentrieren.

Wenn Sie allein die Textbereiche zum Zentrum, können Sie dies tun:

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

Fügen Sie Text-Zentrum in übergeordneten Container. zeigen Sie es im Vollbildmodus an.

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

Auch col-md-3 hat float: links damit. Adressieren Sie dies durch Hinzufügen von style = "float: none" auf dem Div mit Col-md-3.

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

Answer 3

Set 100% Breite in allen Elementen bedeutet Label, Textarea. Und ändere col-md-3 in col-md-4. Unten ist der Code-Snipit.

<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

Versuchen Sie diese.

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

Hier ist der Link. http://www.bootply.com/tvCIHTOdAE#