Question

我试图在水平形式中创建一个内联文本字段，基本上我想将表单拆分为两个部分（左侧和右侧），左侧我将有像水平文本字段和一些内联以及在右边我希望有一些内联，有些则没有。

我怎么能建立这样的东西，也许这张图可以帮助 JSFiddle Here：http://jsfiddle.net/XQx6v/

这是我的代码不能正常工作（我想让它以900 px为中心，如果它很小的话，也会响应掉到另一行）：

  <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>

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

1 个答案: