[英]how to horizontally align label and select tags in bootstrap 3?
The problem is that there is a big gap between the labels
and 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-x
inside my row
but didn't work. 我试图row
添加一些col-sm-x
但是没有用。 Here is an image on how it looks like: 这是有关其外观的图像:
I also tried to add the pull-right
class inside my labels, but since label
and select tag
are inside the same form-group
I think this is causing the all thing to move out of place 我也尝试在标签中添加pull-right
类,但是由于label
和select tag
在同一form-group
所以我认为这导致所有内容移到了不正确的位置
With .form-horizontal
, every .control-label
child will be right-aligned for sm
and more. 使用.form-horizontal
,每个.control-label
子级将右对齐以获取sm
及更多内容。
So, correcting the .control-label
should be sufficient. 因此,更正.control-label
应该足够了。
However, since there is no designation of how the smaller resolutions should be rendered, you can add .text-right
to 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
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">
到<label class="col-sm-4 control-label">
And it'll magically align right ;) 它会神奇地对齐;)
take a look at Bootstrap #forms-horizontal 看看Bootstrap#forms-horizontal
By specifying the col-sm-4
class for your labels, you are forcing them to take up one third of their container. 通过为标签指定col-sm-4
类,您将迫使它们占用其容器的三分之一。 Try reducing this to col-sm-3
or col-sm-2
. 尝试将其减少为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. 您可能还需要指定一些col-xs-*
col-md-*
col-xs-*
, col-md-*
和col-lg-*
类,以确保在不同的浏览器尺寸下按需要显示表单。 See here for more details. 有关更多详细信息,请参见此处 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.