bootstrap col space перед метками

Question

Привет, как добавить пространство перед моими ярлыками в этом div? im используя систему начальной загрузки. можно ли это сделать без заполнения?

<div class="module-body"> 
            <div class="row"> 
             <label class="event-label col-md-2" style="font-size:16px">Event:</label> 
             <input type="text" class="event-input"> 
            </div> 
            <div class="row"> 
             <label class="event-label col-md-2" style="font-size:16px">When:</label> 
            </div> 
            <div class="row">          
             <label class="event-label col-md-2" style="font-size:16px">Where:</label> 
             <input type="text" class="event-input"> 
            </div> 
            <div class="row"> 
             <label class="event-label col-md-2" style="font-size:16px">Cause:</label> 
            </div> 
            <div class="row"> 
             <label class="event-label col-md-2" style="font-size:16px">Preferred Skills:</label> 
             <input type="text" class="event-input"> 
            </div> 
            <div class="row"> 
             <label class="event-label col-md-2" style="font-size:16px">No. of Volunteers:</label> 
            </div> 
            <div class="row"> 
             <label class="description-label col-md-2" style="font-size:16px">Description:</label> 
            </div> 
             <input type="text" class="event-description"> 
           </div>     

Answer 1

Вам просто нужно добавить container класс в обертку div или если вы хотите полный контейнер ширина вы можете использовать container-fluid класс вместо container.

<div class="module-body container"> 

Строка должна быть размещена в пределах .container (фиксированная ширина) или .container-жидкости (полная ширина) для правильного выравнивания и заполнения.

Вы добавляете строку для каждой маркировки и группы ввода, которая не является хорошей практикой.

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

<div class="module-body container"> 
 
            <div class="row"> 
 
             <label class="event-label col-md-2" style="font-size:16px">Event:</label> 
 
             <input type="text" class="event-input"> 
 
            </div> 
 
            <div class="row"> 
 
             <label class="event-label col-md-2" style="font-size:16px">When:</label> 
 
            </div> 
 
            <div class="row">          
 
             <label class="event-label col-md-2" style="font-size:16px">Where:</label> 
 
             <input type="text" class="event-input"> 
 
            </div> 
 
            <div class="row"> 
 
             <label class="event-label col-md-2" style="font-size:16px">Cause:</label> 
 
            </div> 
 
            <div class="row"> 
 
             <label class="event-label col-md-2" style="font-size:16px">Preferred Skills:</label> 
 
             <input type="text" class="event-input"> 
 
            </div> 
 
            <div class="row"> 
 
             <label class="event-label col-md-2" style="font-size:16px">No. of Volunteers:</label> 
 
            </div> 
 
            <div class="row"> 
 
             <label class="description-label col-md-2" style="font-size:16px">Description:</label> 
 
            </div> 
 
             <input type="text" class="event-description"> 
 
           </div>  

Answer 2

может помочь структурировать таким образом.

HTML:

<div class="form-group"> 
    <div class="row"> 
     <label class="event-label col-md-2" style="font-size:16px"> 
     Event:</label> 
     <input type="text" class="event-input"> 
     </div> 
</div>