如何有并排表单字段侧自举

我试图通过侧标签/输入字段放在一起的一面，但我无法做到，这里是我的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

如何有并排表单字段侧自举

回答

相关问题