Question

在Mobile模式下查看以下示例。

在Fieldset 3中，为什么左边的所有标签和文本框都有轻微的padding。

Answer 1

导致列的nestind类。首先你有div.col-md-6.form-group，而你内有label.control-label.col-md-8，所以它会使col-*的填充加倍。

Answer 2

与下面的答案状态一样，您已将col-md-6课程与 Fieldset 3 的form-group一起提供。既然你需要col-md-6将元素分成2列，你可以定位那个特定的字段集并删除填充。

HTML：

 <form class="form-horizontal" id="fieldset3"> <!-- ID added -->
            <fieldset>
                <legend>Fieldset 3</legend>

CSS：

#fieldset3 .col-md-6{
  padding-left:0px;
}

<强> DEMO 1

为了方便起见，您还可以通过这种方式对标签进行分组：

<div class="col-md-6">
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
    <div class="form-group">
        <!-- Label and input here -->
    </div>
</div>

<强> DEMO 2

填充问题 - bootstrap 3

2 个答案: