我试图将我的Bootstrap 2表单迁移到Bootstrap 3。
我当前的代码和小提琴： http://jsfiddle.net/mavent/Z4TRx/
我当前的代码和小提琴： 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>
我想要内联行为，我的标签2将在文本输入旁边，我的标签3将在文本输入旁边。我也需要横向行为，我的标签4将在文本区域的顶部。我的标签2和我的标签3的文本框将是4列宽，我的标签4的宽度将是表单的全宽。
在Bootstrap 3中如何做到这一点？
解决方法
只是因为文档建议你应该使用表单控件并不意味着你必须。您只需使用内置的网格系统来实现布局。请参见
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>
更新：只是意识到我删除了标签标签。更新了答案，交换< label>用于< div>。
更新：根据下面的评论的要求，更新代码以反映需要保留在这个布局中。见http://jsfiddle.net/8xxUV/3一个工作示例。
