Bootstrap表单元素间距失效：form-group未生效的原因与修复

我来帮你分析下为什么form-group的间距没生效，以及对应的修复方法：

核心原因 #

在Bootstrap 3中，form-group类默认自带margin-bottom来实现表单元素的间距，但你这里的问题出在三个点：

1. 缺少form-horizontal类：当你使用col-sm-*栅格类布局label和输入框时，需要给表单容器添加form-horizontal类——它会专门处理form-group内部浮动元素的清除逻辑，保证margin-bottom的间距能正常生效。
2. 错误的样式应用：你给单选按钮加了form-control类，这个类是为文本输入框、下拉框这类元素设计的，会导致单选按钮的样式错乱，也会间接影响布局。
3. 栅格嵌套不规范：单选按钮区域的col-sm-5直接嵌套在col-sm-10里，没有用row包裹，不符合Bootstrap栅格的嵌套规则，会导致布局间距异常。

修复步骤 #

1. 给包裹所有form-group的容器（这里是<div id="command">）添加form-horizontal类；
2. 移除所有单选按钮上的form-control类；
3. 用row包裹单选按钮区域的两个col-sm-5，保证栅格布局的正确性。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#command">Command</a></li>
    <li><a data-toggle="tab" href="#volumes">Volumes</a></li>
    <li><a data-toggle="tab" href="#networkTab">Network</a></li>
    <li><a data-toggle="tab" href="#labels">Labels</a></li>
    <li><a data-toggle="tab" href="#environmentTab">Environment Variables</a></li>
    <li><a data-toggle="tab" href="#security">Security</a></li>
  </ul>
  <div class="tab-content tab-content-border" style="width: 100%">
    <div id="command" class="tab-pane fade in active form-horizontal">
      <div class="form-group">
        <label for="commands" class="col-sm-2 control-label">Command</label>
        <div class="col-sm-10">
          <input name="commands" id="commands" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="entryPoint" class="col-sm-2 control-label">Entry Point</label>
        <div class="col-sm-10">
          <input name="entryPoint" id="entryPoint" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="workingDir" class="col-sm-2 control-label">Working Directory</label>
        <div class="col-sm-10">
          <input name="workingDir" id="workingDir" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label for="user" class="col-sm-2 control-label">User</label>
        <div class="col-sm-10">
          <input name="user" id="user" class="form-control" type="text" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Console</label>
        <div class="col-sm-10">
          <div class="row">
            <div class="col-sm-5">
              <div class="radio radio-info">
                <input name="console" id="it" type="radio" />
                <label for="it">Interactive & TTY <small>(-i -t)</small></label>
              </div>
              <div class="radio radio-info">
                <input name="console" id="tty" type="radio" />
                <label for="tty">TTY <small>(-t)</small></label>
              </div>
            </div>
            <div class="col-sm-5">
              <div class="radio radio-info">
                <input name="console" id="interactive" type="radio" />
                <label for="interactive">Interactive <small>(-i)</small></label>
              </div>
              <div class="radio radio-info">
                <input name="console" id="none" type="radio" checked/>
                <label for="none">None</label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外说明 #

如果不想用form-horizontal类，也可以手动给每个form-group添加clearfix类来清除浮动，但使用Bootstrap原生的form-horizontal是更规范的做法，能避免额外的自定义样式。

内容的提问来源于stack exchange，提问作者user9239399