Bootstrap форма строка ширина

Question

Я пытаюсь создать форму, глядя, как это: JSFIDDLE

Проблема заключается в том, что строка гораздо шире, чем фактическое содержание, поэтому контейнер получить натяжной способ много.

Кто-нибудь понял, как уменьшить ширину строк до фактического содержимого?

<div class="container" style="border: 1px solid black"> 
    <h2>Vertical (basic) form</h2> 
    <form class=""> 

    <div class="form-group row"> 
     <div class="col-sm-3"> 
     <input type="email" class="form-control" id="email" placeholder="Enter email"> 
     </div> 
     <div class="col-sm-3"> 
     <input type="passord" class="form-control" id="pwd" placeholder="Enter password"> 
     </div> 
    </div> 

    <div class="form-group row"> 
     <div class="col-sm-6"> 
     <textarea class="form-control" cols="5" maxLength="500" /> 
     </div> 
    </div> 




    </form> 
</div> 

Answer 1

Try this resizable fiddle, когда вы делаете окно просмотра шире input s должен оставаться на их размере столбца, не заполняя всю видовую строку.

EDIT: .col классов будут граничили (если вы не хотите, граница занимают все 12 столбцов, как с .container класса), .container всегда будут занимать всю сетку 12 столбцов.

Как изображение ниже показывает, вы используете 6 столбцов (половину сетки), так что еще 6 col элемент мог пойти на это право, поэтому если вы граничат .container, она всегда будет показывать все 12 колонки width.