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>

我尝试在col-sm-x内添加一些row，但没有成功。这是一个关于它的样子的图像：

我还尝试在我的标签中添加pull-right类，但由于label和select tag位于同一form-group内，我认为这会导致所有内容移动到位

Answer 1

使用.form-horizontal，每个.control-label子将与sm及更多对齐。

因此，纠正.control-label就足够了。

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

这是一个Bootply，可以让您更轻松地查看：http://www.bootply.com/LtdAfSi0B3

＆＃13;

<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>

＆＃13;

来源：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-horizontal

Answer 3

通过为标签指定views.py类，您迫使它们占据其容器的三分之一。请尝试将其缩小为col-sm-4或col-sm-3。

请记住您的表单如何查看不同的浏览器尺寸。您可能还需要指定一些col-sm-2，col-xs-*和col-md-*类，以确保在不同的浏览器大小中根据需要显示表单。有关详细信息，请参阅here。

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

3 个答案: