引導行中的中心項目

我在引導行中有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。

如何正確居中這些項目？我已經嘗試過利潤率，但他們確實沒有得到我的任何地方。

來源

2017-04-25 GTown-Coder

將'.text-center'添加到每個'.col-md-3' –

將標籤置於文本區域的頂部，但我正在尋找要居中的文本區域 –

編輯：

您可以在父容器上使用display: flex; justify-content: space-between;（即持有3 .col-md-3）實現正是你追求的。

你可以通過簡單地增加.text-center到每個.col-md-3元素做到這一點。這將集中所有元素。

如果你想獨自居中文本區域，你可以這樣做：

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

來源

2017-04-25 14:46:37

我更新了我的[Bootply ]（http://www.bootply.com/vfnTeLO6K9）與你的答案，但請注意，與第一個文本區域相比，在側面的最後一個文本區域之間有多大空間？ –

啊我明白你的意思了。使用col-md-4類會出現什麼格式錯誤？另一個選擇是用'display：flex;'覆蓋父容器，然後使用'justify-content：space-between' –

上一個文本區域的標籤將顯示在文本區域的左側..由於其他標籤的長度.. –

<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有float：left。通過在col-md-3的div上添加style =「float：none」來解決此問題。

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

來源

2017-04-25 14:48:04 jmag

設置所有元素的100％寬度意味着label，textarea。並將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>

來源

2017-04-25 14:58:40 seven

*「這可以很容易地解決只需給每個3項目一類名稱col-md-4，但這會導致格式問題「* –

在標籤和textarea標籤中設置100％寬度時沒有格式問題。 – seven

您不知道OP計劃使用的全部範圍。事實上，他們已經試過這個，並說我所引用的是一個模擬答案 –

試試這個。

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

來源

2017-04-26 05:29:29

引導行中的中心項目

回答

相關問題