Question

我有一个选择项目，我已经从http://silviomoreto.github.io/bootstrap-select/
开始应用了selectpicker功能现在我正在尝试将input-group-addon与select对齐，后者变成了btn-group，但是插件的高度永远不会与btn-group的高度相同，我使用的是twitter bootstrap 3.
任何可以建议我如何做的人，我的代码是：

<div class="input-group">
    <span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
    <div class="btn-group bootstrap-select">
        <button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
            <div class="filter-option pull-left">1</div>
            <div class="caret"></div>
        </button>
        <div class="dropdown-menu open">
            <ul class="dropdown-menu inner" role="menu">
        </div>
        <select class="selectpicker mobile-device" style="display: none;">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>

Answer 1

以下是我修复它的jsbin。 jsbin

当您将输入组大小设置为“input-group-lg”或“input-group-sm”时，它将为您提供预定义的大小 - 最明显的是输入的高度分别为46px或30px。但是，如果您接受常规尺寸，则不会发生任我认为如果您对Bootstrap之外的输入进行设置，您就不会感到惊讶。

以下是lg

的示例测量

.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 6px;
}

我没有在事后调整lg，而是创建了一个名为'input-group-reg'的类，使用的测量值是bootstrap给出的'lg'和'sm'之间的中间点。

.input-group-reg > .form-control {
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;  
}

/* Sizing the input */
.default-input-group-lg > form-control {
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;  
}

/* Sizing the button */
.input-group-reg > .input-group-btn > .btn, .input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
    height: 38px;
    padding: 8px 13px;
    font-size: 14px;
    line-height: 1.44;
    border-radius: 6px;
}

Answer 2

当您使用某些SASS编译器进行编译时，听起来您正在使用Bootstrap遇到已知问题。请参阅https://github.com/twbs/bootstrap-sass/issues/409。

如果您正在使用bootstrap-sass，那就是导致它的问题。在编译Bootstrap之前，必须将SASS精度设置为10。你如何设置它取决于你的特定设置（Gulp，Grunt，Laravel Elixir等）。

Answer 3

.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:**0px**;margin-left:0}

位于select.min.css的第一行将margin-bottom设置为0 - ＆gt;问题解决了！

Answer 4

正如@theptrk所说，在不使用input-group-sm或input-group-lg时，似乎没有为输入组中的按钮设置明确的高度。我能够通过将其添加到我的bootstrap覆盖中来解决这个问题：

// Fix input-group button sizing issue
.input-group > .input-group-btn > .btn, .input-group-btn:last-child > .dropdown-toggle {
  height: 34px;
}

twitter bootstrap input-group-addon和btn-group没有很好地对齐

4 个答案: