Question

我正在使用bootstrap来显示表单内联。但是，我无法想象如何删除表单输入之间的空格，它总是留下~4p空白。我试图用保证金调整它，徒劳无功。知道为什么吗？

这是表格

<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

另一种方法是浮动输入：

.form-group {
   float:left; 
}

<强> bootply example

删除引导程序表单输入之间的边距

1 个答案: