下拉列表与不同的css不同的高度

Question

我有一个安装了Slate bootstrap主题的网站。

当我使用actio按钮添加下拉列表时，下拉列表的高度与操作按钮不同。

如果我尝试使用自举的基本主题，那么它可以正常工作。

两个例子都使用此代码

    <div class="input-group">
        <select id="listEmployee" class="form-control valid">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <div class="input-group-btn">
            <button type="button" class="btn btn-default">This button</button>
        </div>
    </div>

使用Bootstrap默认主题 Fiddle

使用Boostrap Slate主题

Fiddle

我该如何解决这个问题？

Answer 1

您可以在form-control课程中看到高度的定义不同。

默认

.form-control {
  height: 34px;
}

Slate

.form-control {
  height: 38px;
}

要覆盖它，请执行

#listEmployee.form-control {
  height: 34px; //or whatever height you want
}

Answer 2

您只需要为自己的按钮添加边框。

＆＃13;

＆＃13;

#pragma pack

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

body {
  margin: 10px;
}
.btn.btn-default.btn-border,
.btn.btn-default.btn-border:hover,
.btn.btn-default.btn-border:focus {
  border: 1px solid white;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

实际上它们的高度相同，但按钮的边框颜色与背景相似，这使得按钮的高度看起来更低。

看图像：