Можно ли поставить класс бутстрапов col - * - * на элементы ввода?

Question

Я пытаюсь сделать отзывчивую форму, используя Bootstrap. Является ли это правильно использовать седловины - ** - * классы, как это:

<div class="row"> 
    <input class="col-*-blabla" ... ... > 
    <input class="col-*-blabla" ... ... > 
</div> 

или я должен их гнездо внутри DIV с классом Col, как это:

<div class="row"> 
    <div class="col-*-*"> 
    <input .. ... > 
    </div> 
    <div class="col-*-*"> 
    <input .. ... > 
    </div> 
</div> 

Спасибо.

Answer 1

Вы должны вложить их в гнездо. В документации Bootstrap есть один пример, который показывает использование классов col- на элементах ярлыков (Horizontal forms).

Посмотрите на этом примере, красный блок является ДИВЫМ с присвоенным col-xs-12 классом внутри row, как вы можете видеть ниже этого контейнер, когда вы используете col- классов входных элементов они будут Разрегулированными (это потому, что оно применяется отступы для элементов ввода сам).

.div { 
 
    height: 200px; 
 
    background: red; 
 
} 
 
.row { 
 
    margin-bottom: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    
 
    <div class="row"> 
 
    
 
    <div class="col-md-12"> 
 
     <div class="div"></div> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    <div class="row"> 
 
    <input type="text" class="col-xs-4"> 
 
    <input type="text" class="col-xs-4"> 
 
    </div> 
 
    
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <input type="text"> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <input type="text"> 
 
    </div> 
 
    
 
</div>