Html Twitter Bootstrap 3 内联和水平形式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18879744/
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
Twitter Bootstrap 3 inline and horizontal form
提问by trante
I'm trying to migrate my Bootstrap 2 form to Bootstrap 3.
My current code and fiddle: http://jsfiddle.net/mavent/Z4TRx/
我正在尝试将我的 Bootstrap 2 表单迁移到 Bootstrap 3。
我当前的代码和小提琴：http: //jsfiddle.net/mavent/Z4TRx/
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br/><br/>
<div class="form-group">
<label for="name">My Label 2</label>
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
<div class="form-group">
<label for="email">My Label 3</label>
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">My Label 4</label>
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 40px">Send</button>
</form>
</div>
</div>
I want inline behaviour, my label 2 will be next to text input, my label 3 will be next to text input. I also need horizontal behaviour, my label 4 will be on top of the textarea. My label 2's and my label 3's text box will be 4 column width, my label 4's width will be full width of the form.
我想要内联行为，我的标签 2 将在文本输入旁边，我的标签 3 将在文本输入旁边。我还需要水平行为，我的标签 4 将位于 textarea 的顶部。我的标签 2 和标签 3 的文本框将是 4 列宽，我的标签 4 的宽度将是表单的全宽。
How can I do this in Bootstrap 3 ?
我怎样才能在 Bootstrap 3 中做到这一点？
回答by Sean Ryan
Just because the docs suggest you should use the form controls does not mean you have to. You can just use the built-in grid system to achieve the layout. See http://bootply.com/82900for a working example. Code below:
仅仅因为文档建议您应该使用表单控件并不意味着您必须这样做。您可以使用内置的网格系统来实现布局。有关工作示例，请参阅http://bootply.com/82900。代码如下：
<div class="container">
<form role="form">
<div class="row">
<label class="col-xs-4" for="inputEmail1">Email</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="row">
<label class="col-xs-4" for="inputPassword1">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="row">
<label class="col-xs-12" for="TextArea">Text Area</label>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" id="TextArea"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
UPDATE: Just realized I dropped the label tags. Updated the answer, swapping <label>for <div>.
更新：刚刚意识到我删除了标签标签。更新了答案，换<label>了<div>.
UPDATE: Updating code to reflect need to stay in this layout in small widths, as requested in comments below. See http://jsfiddle.net/8xxUV/3for a working example.
更新：更新代码以反映需要以小宽度保留在此布局中，如以下评论中所要求。有关工作示例，请参阅http://jsfiddle.net/8xxUV/3。
回答by mccannf
What you are looking for is not really in-line behaviour at all, just horizontal.
您正在寻找的根本不是真正的内联行为，只是水平行为。
This code should help:
这段代码应该有帮助：
<div class="" id="myDialog1">
<div class="" id="myDialog2">
<form role="form" class="form-horizontal" id="contactForm" onsubmit="send(); return false;">
<label>Please fill the form</label>
<br><br>
<div class="form-group">
<label for="name" class="col-lg-3 col-sm-3">My Label 2</label>
<div class="col-lg-7 col-sm-7">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="form-group">
<label for="email" class="col-lg-3 col-sm-3">My Label 3</label>
<div class="col-lg-7 col-sm-7">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="form-group">
<label for="message" class="col-lg-3">My Label 4</label>
<div class="col-lg-10 col-sm-10">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary" id="submit" style="margin-left: 20px">Send</button>
</form>
</div>
</div>
And looks like this:
看起来像这样：
The col-sm-*tags are optional - they just stop the elements from stacking as you size the window down.
该col-sm-*标签是可选的-他们只是从堆积停止元素为你调整窗口大小下来。
You can try it out here: http://bootply.com/82889
你可以在这里试试：http: //bootply.com/82889
回答by Amir
I had the same problem, here is my solution:
我遇到了同样的问题，这是我的解决方案：
<form method="post" class="col-md-12 form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="[email protected]"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
这是演示
回答by user2594152
you can try the code below
你可以试试下面的代码
<div class="" id="myDialog1">
<form role="form" class="" id="contactForm" onsubmit="send(); return false;">
<div class="clearfix igr col-md-12">
<label>Please fill the form</label>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="name">My Label 2</label>
</div>
<div class="col-md-3">
<input type="text" class="form-control" name="name" id="name" required="required" value="myName">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<label for="email">My Label 3</label>
</div>
<div class="col-md-3">
<input type="email" class="form-control" name="email" id="email" required="required">
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-12">
<label for="message">My Label 4</label>
</div>
<div class="col-md-3">
<textarea class="form-control" name="message" id="message" required="required"></textarea>
</div>
</div>
<div class="clearfix igr col-md-12">
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-primary" id="submit" >Send</button>
</div>
</div>
</form>
</div>
and use the styles as:
并将样式用作：
label,textarea{
margin:5px 0;
}
.igr{
margin:15px 0;
}
回答by lobati
Adding the class control-labelto your labels should do the trick for you.
将类添加control-label到您的标签应该对您有用。
