html - 如何在 bootstrap 3 中水平对齐标签和选择标签？

Question

问题是 labels 和 select tags 之间有很大的差距

<form class="form-horizontal">
<fieldset>
  <div class="row">

      <div class="form-group">
          <label class="col-sm-4 contro-label ">What Skill will you be working on?</label>
          <div class="col-sm-3">
              <select class="form-control input-sm">
                  <option>Select</option>
                  <option>PHP</option>
                  <option>JAVA</option>

              </select>
          </div>
      </div>

      <div class="form-group">
          <label class="col-sm-4 contro-label">What Course?</label>
          <div class="col-sm-3">
              <select class="form-control input-sm">
                  <option>Select</option>
                  <option>CMP</option>

                  <option>IT</option>
              </select>
          </div>
      </div>

      <div class="form-group">
          <label class="col-sm-4 contro-label">Section?</label>
          <div class="col-sm-3">
              <select class="form-control input-sm">
                  <option>Select</option>

                  <option>34432</option>
                  <option>44333</option>
              </select>
          </div>
      </div>

  </div>
</fieldset>  
</form>

我试图在我的 row 中添加一些 col-sm-x 但没有成功。这是一张关于它的样子的图片:

我还尝试在我的标签中添加 pull-right 类，但由于 label 和 select tag 在同一个 form-group 我认为这导致所有东西都错位了

Answer 1

您忘记了一个 L : <label class="col-sm-4 contro-label">至 <label class="col-sm-4 control-label">

它会神奇地对齐 ;)

看看Bootstrap #forms-horizontal