在Bootstrap中，为什么我的搜索按钮不是内联的？

Question

我使用以下代码制作一个带引导程序的简单公式：

<form class="form-inline">

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">De</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>
  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">A</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>
  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Départ</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Retour</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>

  <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label"></label>
      <button type="submit" class="btn btn-default">recherche</button>
  </div>

</form>

但结果是：

那么，为什么搜索按钮高于其他输入字段？有没有办法重新定位它而不会触及响应性？

谢谢

Answer 1

在按钮顶部添加一个带有 的空标签，以便对齐，就像这样

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<form class="form-inline">
    
      <div class="form-group col-xs-2 col-md-2">
          <label for="name" class="control-label">De</label>
          <input type="email" value='' id="name" placeholder="Ime">
      </div>
      <div class="form-group col-xs-2 col-md-2">
          <label for="name" class="control-label">A</label>
          <input type="email" value='' id="name" placeholder="Ime">
      </div>
      <div class="form-group col-xs-2 col-md-2">
          <label for="name" class="control-label">Départ</label>
          <input type="email" value='' id="name" placeholder="Ime">
      </div>
    
      <div class="form-group col-xs-2 col-md-2">
          <label for="name" class="control-label">Retour</label>
          <input type="email" value='' id="name" placeholder="Ime">
      </div>
    
      <div class="form-group col-xs-2 col-md-2">
          <label for="name" class="control-label">&nbsp;</label>
          <button type="submit" class="btn btn-default">recherche</button>
      </div>
    
    </form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的按钮不应位于表单组中，此外，这不是标记内联表单的常用方法（使用cols）。请参阅此示例，我将您的一些字段用于简洁：

＆＃13;

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<form class="form-inline">

  <div class="form-group">
      <label for="name" class="control-label">De</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>
  
  <div class="form-group">
      <label for="name" class="control-label">A</label>
      <input type="email" value='' id="name" placeholder="Ime">
  </div>

 <button type="submit" class="btn btn-default">recherche</button>

</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请参阅下面的代码段。

首先，您的input字段超出了width的{​​{1}}。所以将col设置为

第二，max-width:100%具有.btn样式，请改用<{1}}

让我知道它是否适合你

inline-block

display:block

Answer 4

添加＆lt; br /＆gt;标签后，像这样

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline">
    <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">De</label><br />
      <input type="email" value='' id="name1" placeholder="Ime">
    </div>
    <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">A</label><br />
      <input type="email" value='' id="name2" placeholder="Ime">
    </div>
    <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Départ</label><br />
      <input type="email" value='' id="name3" placeholder="Ime">
    </div>
    <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label">Retour</label><br />
      <input type="email" value='' id="name4" placeholder="Ime">
    </div>

    <div class="form-group col-xs-2 col-md-2">
      <label for="name" class="control-label"></label><br />
      <button type="submit" class="btn btn-default">recherche</button>
    </div>
</form>