html - 标签前的 Bootstrap 列空间

Question

您好，如何在此 div 中的标签前添加空格？我正在使用 Bootstrap 网格系统。是否可以不用填充来做到这一点？

<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 类而不是容器。

<div class="module-body container">

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

您要为每个标签和输入组添加一行，这不是一个好的做法。

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