html - 使用 Twitter Bootstrap 3.0 的内联文本字段

Question

我正在尝试在水平表单中制作一个内联文本字段，基本上我想将表单分成两个部分(左和右)，在左手我会有水平文本字段和一些内联文本字段在右侧，我希望有一些内联，而有些则没有。

我如何建立类似的东西，也许这张图可以帮助 JSFiddle 在这里:http://jsfiddle.net/XQx6v/

这是我的代码，它不起作用(我想让它居中 900 像素，如果它很小，也可以响应掉落到另一行):

  <form class="form-horizontal" action="" method="POST">
   <!-- first Row -->
          <div style="margin:auto; width:900px;" class="row">
             <div class="col-xs-6">
                  <div class="row">
                      <div class="form-group">
                        <label class="control-label">First Name</label>
                        <input type="text" value="test" name="first_name" class="form-control beta">
                        <label class="control-label">Last Name</label>
                        <input type="text" value="test" name="last_name" class="form-control beta">            </div>
                 </div>
             </div>
            <!-- Next Column -->
            <div class="col-xs-6">
               <div class="row">
               <p> testhghghjg </p>
            </div>  
       </div>
     </div>
  </form>

谢谢

Answer 1

我认为您实际上并不需要 Bootstrap 所称的内联表单，而是具有内联元素的表单... Try this Bootply

<div class="container" style="max-width:900px">

  <div class="row">
    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 1</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 2</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 3</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 4</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>
  </div></div>