Бутстрап 3. Ширина контрольной метки?

Question

У меня есть такая форма в загрузчике 3 (скрипка: http://jsfiddle.net/52VtD/2052/)

<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 и все такое! Что такое witdh из .control-label класс? Есть ли у кого-нибудь решение?

Answer 1

Проблема не ширина .control метки, это ширина столбцов, бутстраповская 3 по умолчанию сетка имеет 12 столбцов, если вы назначаете col-XX-6 на .control-label, она получает первые 6 colmuns (в середине экрана), и то же самое происходит со входами.

вы также можете использовать text-align: center на контейнере кнопок, чтобы сделать его центрированным.

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> 

`

Answer 2

Add «форм-контроль» на свой вход и выбирает ..

http://bootply.com/108625