標簽前的bootstrap col空間

Question

嗨，如何在此div中的標簽之前添加空格？ 即時通訊使用引導網格系統。 不用填充就可以做到嗎？

<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

可能有助於這種結構。

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>

Answer 2

您只需要在包裝器div添加container類，或者如果您想要一個全角容器，則可以使用container-fluid類而不是container 。

<div class="module-body container">

必須將行放置在.container（固定寬度）或.container-fluid（全角）內，以便正確對齊和填充。

您正在為每個標簽和輸入組添加一行，這不是一個好習慣。

 @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>