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" o 我试图将我的bootstrap 2表单迁移到bootstrap 3。
我当前的代码和小提琴： http://jsfiddle.net/mavent/Z4TRx/

<div  ID="myDialog1">    <div  ID="myDialog2">        <form role="form"  ID="contactForm" onsubmit="send(); return false;">            <label>Please fill the form</label>            <br/><br/>            <div >                <label for="name">My Label 2</label>                <input type="text"  name="name" ID="name" required="required" value="myname">            </div>            <div >                <label for="email">My Label 3</label>                <input type="email"  name="email" ID="email" required="required">            </div>            <div >                <label for="message">My Label 4</label>                <textarea  name="message" ID="message" required="required"></textarea>            </div>            <button type="submit"  ID="submit" >Send</button>        </form>    </div></div>

我想要内联行为，我的标签2将在文本输入旁边，我的标签3将在文本输入旁边。我也需要横向行为，我的标签4将在文本区域的顶部。我的标签2和我的标签3的文本框将是4列宽，我的标签4的宽度将是表单的全宽。

在bootstrap 3中如何做到这一点？

解决方法 只是因为文档建议你应该使用表单控件并不意味着你必须。您只需使用内置的网格系统来实现布局。请参见 http://bootply.com/82900一个工作示例。代码如下：

<div >  <form role="form">    <div >      <label  for="inputEmail1">Email</label>      <div >        <input type="email"  ID="inputEmail1" placeholder="Email">      </div>    </div>    <div >      <label  for="inputPassword1">Password</label>      <div >        <input type="password"  ID="inputPassword1" placeholder="Password">      </div>    </div>    <div >      <label  for="TextArea">Text Area</label>    </div>    <div >      <div >        <textarea  ID="TextArea"></textarea>      </div>    </div>    <div >      <div >        <button type="submit" >Sign in</button>      </div>    </div>  </form></div>

更新：只是意识到我删除了标签标签。更新了答案，交换< label>用于< div>。

更新：根据下面的评论的要求，更新代码以反映需要保留在这个布局中。见http://jsfiddle.net/8xxUV/3一个工作示例。

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap 3内联和横向格式全部内容，希望文章能够帮你解决html – Twitter Bootstrap 3内联和横向格式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。