Twitter Bootstrap 3内联和水平形式

Question

我正在尝试将我的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>

我想要内联行为,我的标签2将在文本输入旁边,我的标签3将在文本输入旁边.我还需要水平行为,我的标签4将位于textarea的顶部.我的标签2和我的标签3的文本框将是4列宽,我的标签4的宽度将是表格的全宽.

我怎么能在Bootstrap 3中这样做？

Answer 1

仅仅因为文档建议你应该使用表单控件并不意味着你必须这样做.您可以使用内置网格系统来实现布局.有关工作示例,请参见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.