twitter-bootstrap 如何在引导程序 3 中水平对齐标签和选择标签？

how to horizontally align label and select tags in bootstrap 3?

提问by JMASTER B

The problem is that there is a big gap between the labelsand select tags

问题是，存在很大的差距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>

I tried to add some col-sm-xinside my rowbut didn't work. Here is an image on how it looks like:

我试图col-sm-x在我的内部添加一些row但没有用。这是一张关于它的外观的图片：

I also tried to add the pull-rightclass inside my labels, but since labeland select tagare inside the same form-groupI think this is causing the all thing to move out of place

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

采纳答案by Blag

You forgot a L: <label class="col-sm-4 contro-label">to <label class="col-sm-4 control-label">

你忘记了L: <label class="col-sm-4 contro-label">to<label class="col-sm-4 control-label">

And it'll magically align right ;)

它会神奇地正确对齐 ;)

take a look at Bootstrap #forms-horizontal

看看Bootstrap #forms-horizo​​ntal

回答by Christopher Esbrandt

With .form-horizontal, every .control-labelchild willbe right-aligned for smand more.

使用.form-horizontal，每个.control-label孩子都将右对齐 forsm和 more。

So, correcting the .control-labelshould be sufficient.

所以，纠正.control-label应该就足够了。

However, since there is no designation of how the smaller resolutions should be rendered, you can add .text-rightto maintain the right alignment regardless of the resolution.

但是，由于没有指定应如何呈现较小的分辨率，因此无论分辨率如何，您都可以添加.text-right以保持正确对齐。

Here's a Bootply to make it easier to see: http://www.bootply.com/LtdAfSi0B3

这是一个 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>

Source: http://getbootstrap.com/css/#type-alignment

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

回答by James K

By specifying the col-sm-4class for your labels, you are forcing them to take up one third of their container. Try reducing this to col-sm-3or col-sm-2.

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

Remember to see how your form looks at different browser sizes. You may want to specify some col-xs-*, col-md-*and col-lg-*classes as well to ensure that the form is displayed as you want in different browser sizes. See herefor more details.

请记住查看您的表单在不同浏览器大小下的外观。您可能还想指定一些col-xs-*,col-md-*和col-lg-*类，以确保表单在不同浏览器大小中显示为您想要的。请参阅此处了解更多详情。