twitter-bootstrap 使用 Bootstrap 对齐输入框下的标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19354605/
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
Align labels under input boxes using Bootstrap
提问by justinhj
I'm not sure how to go about getting the effect I want here. I have two input boxes that are on the same line and I want to have labels underneath them and aligned to match the respective input box.
我不知道如何在这里获得我想要的效果。我有两个位于同一行的输入框，我想在它们下面放置标签并对齐以匹配相应的输入框。
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
= <label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</div>
</div>
</form>
Take a look at the jsfiddle here for more info:
看看这里的 jsfiddle 了解更多信息：
回答by isherwood
http://jsfiddle.net/isherwood/bTVKZ/6
http://jsfiddle.net/isherwood/bTVKZ/6
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="pull-left">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<br />
<label for="decimal_input">Label 1</label>
</div>
<div>
<input type="text" value="I" width="30" id="input2" class="form-control" />
<br />
<label for="input2">Label 2</label>
</div>
</div>
</form>
</div>
回答by The Alpha
You may try this
你可以试试这个
Extra CSS:
额外的 CSS：
label {
display:block;
}
.form-group {
display:inline-block;
}
Modified HTML:
修改后的 HTML：
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<label for="decimal_input">Label 1</label>
</div>
<div class="form-group">
<input type="text" value="I" width="30" id="input2" class="form-control" />
<label for="input2">Label 2</label>
</div>
</form>
</div>
回答by Eran H.
Your new HTML:
你的新 HTML：
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<span class="inner-container">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
</span>
=
<span class="inner-container">
<label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</span>
</div>
</div>
</form>
</diV>
Your new CSS (of course I would add a class to the labels):
您的新 CSS（当然我会在标签中添加一个类）：
.container {
margin-top: 10px;
}
.inner-container {
position: relative;
}
label {
top: 25px;
left: 5px;
position: absolute;
}
here's the fiddle
这是小提琴
