Bootstrap 3 .control-label width？

我有這種形式的自舉3（小提琴：http://jsfiddle.net/52VtD/2052/）Bootstrap 3 .control-label width？

<div class="container-full">   
<form class="form-horizontal"> 
<fieldset> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="control-label col-sm-4" for="name">Name</label> 
    <div class="col-sm-8 col-md-4"> 
     <input id="name" value="Johnatan Dodsworth" /> 
    </div> 
</div> 
<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="language">Based On</label> 
    <div class="col-md-4"> 
     <select id="language"> 
      <option selected>English</option> 
      <option>German</option> 
     </select> 
    </div> 
</div> 

<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="language">Type</label> 
    <div class="col-md-4"> 
     <select id="language"> 
      <option selected>English</option> 
      <option>German</option> 
     </select> 
    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <div class="col-md-9"> 
     <button id="singlebutton" name="singlebutton" class="btn btn-primary pull-right"> <span class="k-icon k-si-plus"></span> Add</button> 
    </div> 
</div> 

</fieldset> 
</form> 
</div>

我覺得我有.control-label問題，因爲我的窗體不會轉到屏幕的中間，我不能adjut按鈕與上次選擇輸入一起輸入？或者只是在頁面中間形成低點，我試圖改變col-md和一切！ .control-label class是什麼？有沒有人有解決方案？

來源

2014-01-26 Schneider

問題不是。控制標籤的寬度，它的列的寬度，引導3默認網格有12列，如果你將col-XX-6分配給.control-label，它會得到前6個colmuns（到屏幕中間），並且輸入發生同樣的事情。

您還可以使用文本對齊：按鈕容器中心使其居中。

See it on bootply

<div class="container-full">   
<form class="form-horizontal"> 
<fieldset> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="control-label col-sm-6" for="name">Name</label> 
    <div class="col-sm-6"> 
     <input id="name" value="Johnatan Dodsworth"> 
    </div> 
</div> 
<!-- Text input--> 
<div class="form-group"> 
    <label class="col-sm-6 control-label" for="language">Based On</label> 
    <div class="col-sm-6"> 
     <select id="language"> 
      <option selected="">English</option> 
      <option>German</option> 
     </select> 
    </div> 
</div> 

<!-- Select Basic --> 
<div class="form-group"> 
    <label class="col-sm-6 control-label" for="language">Type</label> 
    <div class="col-sm-6"> 
     <select id="language"> 
      <option selected="">English</option> 
      <option>German</option> 
     </select> 
    </div> 
</div> 

<!-- Button --> 
<div class="form-group"> 
    <div class="col-sm-12 centered"> 
     <button id="singlebutton" name="singlebutton" class="btn btn-primary "> <span class="k-icon k-si-plus"></span> Add</button> 
    </div> 
</div> 

</fieldset> 
</form> 
</div>

來源

2014-01-26 18:08:03 Scrocchi

偉大的這是最好的soution，只有一件事是可以將控件標籤中的txt與盒子的左側對齊？ – Schneider

是的：http://bootply.com/108637 – Scrocchi

酷！用'3'＆'9'代替'2'＆'10'解決了我的問題。 –

增加「形制」您輸入和選擇..

http://bootply.com/108625

來源

2014-01-26 18:01:04 ZimSystem

儘管如此按鈕出去對吧？ – Schneider

是的，它會走出'col-md-9'的右側。你想要去哪裏？ – ZimSystem

如果你想讓它居中，只需把它改爲'col-md-12'，然後使用Bootstrap'center-block'類（不需要定製CSS）。我更新了Bootply http://bootply.com/108625 – ZimSystem

Bootstrap 3 .control-label width？

回答

相關問題