如何有並排表單字段側自舉

我試圖通過側標籤/輸入字段放在一起的一面，但我無法做到，這裏是我的HTML代碼：

<div class="col-sm-12 col-md-12"> 
     <div class="block-flat"> 
      <div class="header">       
      <h3>Horizontal Form</h3> 
      </div> 
      <div class="content"> 
      <form class="form-horizontal data-parsley-validate" role="form"> 
       <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
       <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Name" placeholder="Name"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-2 control-label">Address</label> 
       <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Address" placeholder="Address"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-2 control-label">City</label> 
       <div class="col-sm-10"> 
       <input type="text" class="form-control" id="City" placeholder="City"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-2 control-label">Country</label> 
       <div class="col-sm-10"> 
       <input type="text" class="form-control" id="Country" placeholder="Country"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
       <div class="col-sm-10"> 
       <input type="email" class="form-control" id="Email2" placeholder="Email"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
       <div class="col-sm-10"> 
       <input type="password" class="form-control" id="Password2" placeholder="Password"> 
       </div> 
       </div> 
       <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
       <div class="checkbox" > 
       <label> 
        <input type="checkbox" class="icheck"> Remember me 
       </label> 
       </div> 
       </div> 
       </div> 
       <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-10"> 
       <button type="submit" class="btn btn-primary">Registrer</button> 
       <button class="btn btn-default">Cancel</button> 
       </div> 
       </div> 
      </form> 
      </div> 
     </div>    
     </div>

這裏是個什麼樣子，當我運行頁：

以下是我在尋找實現：

0123你想層

來源

2015-11-03 Nick Kahn

環繞的元素在一個單獨的div

<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">Name</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Name" placeholder="Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Address</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Address" placeholder="Address"> 
     </div> 
    </div> 
</div> 
<div class="col-md-6"> 
    <div class="form-group"> 
     <label for="inputEmail3" class="col-sm-2 control-label">City</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="City" placeholder="City"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="inputPassword3" class="col-sm-2 control-label">Country</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="Country" placeholder="Country"> 
     </div> 
    </div> 
</div>

來源

2015-11-03 14:41:54

對於col-md-6中的組，您可能需要比col-sm-2更大的標籤。我敢打賭，當它實際上只是頁面的1/12時，它會變得非常糟糕。 – ganders

好的解決方案。請注意，這隻會在中等設備或更大尺寸的設備上呈現50％寬度的兩個並排列。另外我同意@ganders –

@Stephn_R好點，如果是我，我會將它切換到使用col-sm-6 ... – ganders

您需要定義的表單組元素的寬度。

如果將<div class="form-group">更改爲<div class="col-md-4 form-group">。您將定義一個3列布局，每列包含一個表單分組。

來源

2015-11-03 14:42:01

如何有並排表單字段側自舉

回答

相關問題