html - Bootstrap 行中缺少填充

Question

有人能告诉我这有什么问题吗？

.container {
  margin-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
    <div class="row"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="row">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="row">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
  </div>
</div>

caption、subcaption 和 yaxisname 字段之间没有任何填充。

Answer 1

给form-group而不是 row并添加 <form class="form-horizontal editform"> .

.container {
  margin-top: 10px;
}
.editform.form-horizontal .control-label {  
  text-align: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
  <form class="form-horizontal editform">
    <div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="form-group">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="form-group">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
   </form>
  </div>
</div>