自舉內聯形式和排水溝寬度

Question

我正在嘗試使我的窗體內聯，並試圖減少我的窗體中元素之間的排水溝寬度。什麼是最好的方法呢？

這裏我的jsfiddle代碼和下面的示例。

<form class="form-inline" role="form"> 
    <div class="col-lg-3"> 
    <input type="text" class="form-control" placeholder="Put something here"> 
    </div> 

    <div class="col-lg-3"> 
     <select class="form-control dropdown"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3t</option> 
    </select> 
    </div> 

    <div class="col-lg-3"> 
    <select class="form-control dropdown"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     </select> 
    </div> 

    <div class="col-lg-3"> 
    <button type="submit" class="btn btn-default">submit</button> 
    </div> 

</form> 

Answer 1

您的JSFiddle沒有正確包含Bootstrap 3。嘗試Bootply.com

這裏是我做的例子，似乎是工作的罰款http://bootply.com/108144#

在在線表單中的元素必須包裹在class="form-group"，據我可以在docs看到。

<form class="form-inline" role="form"> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option>Group 1</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
      </select> 
      </div> 
      <div class="form-group"> 
      <select class="form-control"> 
       <option>Group 2</option> 
       <option>2</option> 
       <option>3</option> 
       <option>4</option> 
       <option>5</option> 
      </select> 
      </div> 
      <div class="checkbox"> 
      <label> 
       <input type="checkbox"> Remember me 
      </label> 
      </div> 
      <button type="submit" class="btn btn-default">Sign in</button> 
     </form>