在Bootstrap中,为什么我的搜索按钮不内联?

lrpiutwd  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(115)

我使用下面的代码来做一个简单的公式与引导:

<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>

但结果是:

那么,为什么搜索按钮在其他输入字段的上方?有没有一种方法可以在不影响响应性的情况下重新定位它?
谢谢你

zsohkypk

zsohkypk1#

参见下面的片段。
首先,您的input字段超出了colwidth。因此将max-width:100%设置为它们
第二,.btninline-block样式,使用display:block代替
如果对你有用,请告诉我

input { 
  max-width:100%
}
.form-group .btn {
	display:block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/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>
      <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>
vpfxa7rd

vpfxa7rd2#

在要对齐的按钮顶部添加一个带有&nbsp;的空标签,如下所示

<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>
6za6bjd0

6za6bjd03#

您的按钮不应该在表单组中,而且这也不是标记内联表单的常用方法(使用XML)。请看这个例子,为了简洁起见,我使用了你的一些字段:

<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>
8tntrjer

8tntrjer4#

添加标签后,像这样

<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>
vhmi4jdf

vhmi4jdf5#

为窗体标签和控件标签类添加不可分割的空格对我很有效

<label for="name" class="form-label control-label">&nbsp;</label>

相关问题