html - 删除 Bootstrap 表单输入之间的边距

Question

我正在使用 bootstrap 来显示内联表单。但是，我不知道如何删除表单输入之间的空格，它总是留下 ~4p 空白。我试图用 margin 来调整它，但没有成功。知道为什么吗？

这是表格

<div class="container">
<form id="msform" class="form-inline" role="form" method="post">
  <!-- progressbar -->
      <div class="form-group">
      <input type="hidden" id="form_departure" name="form[departure]" required="required" placeholder="Départ" class="form-control"><input type="text" id="autocompleter_form_departure" name="autocompleter_form[departure]" required="required" placeholder="Départ" class="form-control ui-autocomplete-input" autocomplete="off">
      </div>
      <div class="form-group">
      <input type="hidden" id="form_arrival" name="form[arrival]" required="required" placeholder="Arrivée" class="form-control"><input type="text" id="autocompleter_form_arrival" name="autocompleter_form[arrival]" required="required" placeholder="Arrivée" class="form-control ui-autocomplete-input" autocomplete="off">
      </div>
      <div class="form-group">
          <select id="form_passengers" name="form[passengers]" required="required" class="fly_confirm form-control"><option value="1" selected="selected">1 passager</option><option value="2">2 passagers</option><option value="3">3 passagers</option><option value="4">4 passagers</option><option value="5">5 passagers</option></select>
      </div>

      <div class="form-group">
      <button type="submit" class="btn btn-primary">CHERCHER</button>
      </div>
  </form>
</div>

Answer 1

内联元素对代码中的空白很敏感。最简单的解决方案是简单地删除它。

例如:</div><div class="form-group">

bootply example

另一种方法是 float 输入:

.form-group {
   float:left; 
}

bootply example