Question

为什么带select的输入组没有input的模拟渲染？

我希望select的身高相对input-group。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

<br>

<div class="input-group">
  <select class="form-control">
    <option>
      Option 1
    </option>
  </select>
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

非常感谢你：）

Answer 1

只需在表单样式表中编辑一行，如下所示

＆＃13;

select.form-control:not([size]):not([multiple]) {
    height: auto!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

<br>

<div class="input-group">
  <select class="form-control">
    <option>
      Option 1
    </option>
  </select>
  <span class="input-group-addon">
    <button type="submit" class="btn btn-info">
      <i class="fa fa-3x fa-search" aria-hidden="true"></i>
    </button>
  </span>
</div>

＆＃13;

Bootstrap：输入组和选择高度

1 个答案: