如何在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-*類，以確保在不同的瀏覽器尺寸下按需要顯示表單。 有關更多詳細信息，請參見此處 。