如何在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

使用.form-horizontal ，每个.control-label子级将右对齐以获取sm及更多内容。

因此，更正.control-label应该足够了。

但是，由于没有指定应如何呈现较小分辨率的指示，因此可以添加.text-right来保持正确的对齐方式，而与分辨率无关。

这是一个Bootply，使它更易于查看： http : //www.bootply.com/LtdAfSi0B3

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/> <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-4 control-label text-right">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 control-label text-right">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 control-label text-right">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> </form> 

来源 ： http : //getbootstrap.com/css/#type-alignment

Answer 2

您忘记了L ： <label class="col-sm-4 contro-label">到<label class="col-sm-4 control-label">

它会神奇地对齐;）

看看Bootstrap＃forms-horizo​​ntal

Answer 3

通过为标签指定col-sm-4类，您将迫使它们占用其容器的三分之一。 尝试将其减少为col-sm-3或col-sm-2 。

记住要查看表单在不同浏览器尺寸下的外观。 您可能还需要指定一些col-xs-* col-md-* col-xs-* ， col-md-*和col-lg-*类，以确保在不同的浏览器尺寸下按需要显示表单。 有关更多详细信息，请参见此处 。