Question

我正在使用Twitter Bootstrap（版本3）并且在表单中，我试图将这些字段放在每行两个，但我无法弄清楚如何做到这一点..在这里你可以在{{3}中看到它我做了什么..

<div class="col-md-10">
<div class="form-group">
  <legend>1st sth</legend>

  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div>

  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div>

  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div> 
</div>
  </div>

Answer 1

您必须在div中包含行。 <div class="rows">。

<div class="col-md-10">
<div class="form-group">
  <legend>1st sth</legend>
  <div class="row">
  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div>
  </div>
  <div class="row">
  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div>
  </div>
  <div class="row">
  <div class="col-md-2">
    <select class="form-control" id="select">
      <option value="1">1</option>
      <option value="1">1</option>
      <option value="1">1</option>
    </select>
   </div>
   <div class="col-md-3">                      
       <input type="text" class="form-control" id="inputName" placeholder="name">
   </div> 
</div>
  </div>
  </div>

bootply demo

在引导程序表单中每行放置两个表单字段

1 个答案: