twitter-bootstrap Bootstrap 表单 - 文本框右侧的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25214098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap form - label on right side of text box
提问by ATHER
I have tried almost everything but these fields are not getting horizontally aligned.
我几乎尝试了所有方法，但这些字段没有水平对齐。
it should be like A: textbox B
它应该像 A：文本框 B
<div class="form-group form-horizontal">
<div class="col-sm-4">
<div class="form-group col-sm-10" style="border:1px solid red">
<label for="inlineFold" class="control-label col-sm-5">A :</label>
<div class="input-group col-sm-4">
<input class="form-control" id="txtA" type="text" placeholder="" disabled>
<span>B</span>
</div>
</div>
</div>
<div class="col-sm-4">
<!-- more fields goes here -->
</div>
<div class="col-sm-4">
<!-- more fields goes here -->
</div>
</div>
采纳答案by Drea58
div is a block element,and therefore takes up all horizontal space. just change it's property to inline.
div 是一个块元素，因此占据了所有的水平空间。只需将其属性更改为内联。
CSS
CSS
.input-group{
display: inline;
}
OR
或者
use a span instead
改用跨度
HTML
HTML
<div class="form-group form-horizontal">
<div class="col-sm-4">
<div class="form-group col-sm-10" style="border:1px solid red">
<label for="inlineFold" class="control-label col-sm-5">A :</label>
<span class="input-group col-sm-4">
<input class="form-control" id="txtA" type="text" placeholder="" disabled> <span>B</span>
</span>
</div>
</div>
</div>
回答by Suganth G
In bootstrap css the form-control style takes the total area width, use this solution it will works fine
在 bootstrap css 中，表单控件样式采用总区域宽度，使用此解决方案可以正常工作
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label>A:</label>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<input type="text" class="form-control" disabled="disabled" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label>B</label>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<!-- more fields goes here -->
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<!-- more fields goes here -->
</div>
</div>
It support responsive also, which means you can see this view in any size of screen
它也支持响应式，这意味着您可以在任何尺寸的屏幕上看到此视图
hope this may helpful
希望这会有所帮助
回答by ATHER
Thanks Drea and Jake. I had to remove input-group class on the div and create another with style display:inline and it worked for me. Actually i am using vertically aligned forms where i have to adjust few fields horizontally. Here is the adjusted code.
谢谢德雷亚和Hyman。我不得不删除 div 上的 input-group 类并创建另一个样式为 display:inline 的类，它对我有用。实际上，我正在使用垂直对齐的表单，我必须在其中水平调整几个字段。这是调整后的代码。
Now the next challenge is to control the spacing in between :)
现在下一个挑战是控制之间的间距:)
<div class="form-group form-horizontal">
<div class="col-sm-4">
<div class="form-group col-sm-10" style="border:1px solid red">
<label for="txtA" class="control-label col-sm-5">A :</label>
<div class="col-sm-4">
<input class="form-control" id="txtA" type="text" placeholder="" disabled>
</div>
<div class="col-sm-3" style="display:inline">
<label>B</label>
</div>
</div>
</div>
<div class="col-sm-4">
<!-- more fields goes here -->
</div>
<div class="col-sm-4">
<!-- more fields goes here -->
</div>
回答by seiya
if you like small code. use pull-right and pull-left
如果你喜欢小代码。使用右拉和左拉
.wrapper {
position: absolute;
}
#textbox {
width: 200px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<lable class="pull-left">Foo:</lable>
<lable class="pull-right">Bar:</lable>
<input type="text" id="textbox" class="form-control">
</div>