Question

假设我使用Bootstrap创建以下HTML样式：

<form class="form-horizontal">
  <div class='container'>
    <div class="row">
      <div class="col-sm-3">
        <div class='form-group'>
          <label>First Name</label>
          <input></input> 
        </div>   
        <div class='form-group'>
          <label>Last Name</label>
          <input></input> 
        </div> 
      </div>
      <div class="col-sm-3">
         <div class='form-group'>
          <input type="checkbox"></input>
          </div>
         <div class='form-group'>
          <input></input>
          <input></input> 
         </div>    
      </div>
      <div class="col-sm-3">
         <div class='form-group'>
          <input type="checkbox"></input>
          </div>
        <div class='form-group'>
          <input></input>
          <input></input> 
         </div>    
      </div>
    </div>
  </div>
</form>

您可以看到代码here。我想要做的是设置一个偶数3 x 3矩阵，输入（包括复选框），缺少位置（1,1）。

除此之外，我希望标签位于文本输入的左侧，并保持不在第一组输入的顶部。

Answer 1

您可以通过在form-group上设置最小宽度并在列中一致地使用该类来实现此目的。因为将标签保持在输入旁边所需的尺寸，您还需要调整列宽;使用md代替sm。

＆＃13;

.form-group {
    min-width: 20em;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>


<form class="form-horizontal">
  <div class='container'>
    <div class="row">
      <div class="col-md-3">
          <div class='form-group'><br /></div>
        <div class='form-group'>
          <label>First Name</label>
          <input /> 
        </div>   
        <div class='form-group'>
          <label>Last Name</label>
          <input /> 
        </div> 
      </div>
      <div class="col-md-3">
         <div class='form-group'>
          <input type="checkbox" />
          </div>
        <div class='form-group'>
          <input /> 
         </div>  
        <div class='form-group'>
          <input /> 
         </div>    
      </div>
      <div class="col-md-3">
         <div class='form-group'>
          <input type="checkbox" />
          </div>
        <div class='form-group'>
          <input /> 
         </div>    
        <div class='form-group'>
          <input /> 
         </div>  
      </div>
    </div>
  </div>
</form>

＆＃13;

如何使用Bootstrap设置多个相邻表单

1 个答案: