html – Twitter Bootstrap 3内联和横向格式

我试图将我的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将在文本区域的顶部。我的标签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一个工作示例。

原文地址：https://www.jb51.cc/html/233054.html