twitter-bootstrap 使用 Bootstrap 显示输入和标签同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18530994/
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
Display input and label same line with Bootstrap
提问by user2706463
I would like to display, label and inputs on same line :
我想在同一行显示、标记和输入：
I tried in CSS:
我在 CSS 中尝试过：
form label {
display:block;
float:left;
}
回答by Ritabrata Gautam
here it is
这里是
.span6{
overflow:hidden;
display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}
回答by Paulo Fidalgo
If you are using Bootstrap 3.x:
如果您使用的是 Bootstrap 3.x：
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-sm-2 control-label">Label</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputCity" placeholder="Input text">
</div>
</div>
</form>
回答by Nicole Stutz
I did this in my script. I created a div container box and inside the container, a label left to an input element.
我在我的脚本中做到了这一点。我创建了一个 div 容器框，在容器内，一个标签留给输入元素。
. HTML
. HTML
<div class="container">
<label>Firstname</label>
<input type="text">
</div>
CSS
CSS
div.container{
overflow:hidden;
}
label{
width:70px;
display:block;
float:left;
text-align:left;
}
input{
width:240px;
float:left;
}
回答by Girish Thimmegowda
remove the class input-block-levelgiven to inputtag
删除input-block-level给input标签的类
