自举内联形式和排水沟宽度

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>