8

我有一个选择项，我已经从
http://silviomoreto.github.io/bootstrap-select/
应用了 selectpicker 函数 现在我正在尝试将 input-group-addon 与选择对齐，它变成了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>
4

4 回答 4

5

这是我如何修复它的 jsbin。 jsbin

当您将输入组大小设置为“input-group-lg”或“input-group-sm”时，它将为您提供预定义的大小 - 最值得注意的是输入的高度分别为 46 像素或 30 像素。但是，如果您接受常规尺寸，则不会发生任何事情。我认为如果您在 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;
}
于 2014-03-12T20:40:16.567 回答
4

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

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

于 2015-09-04T20:50:54.987 回答
0

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

// Fix input-group button sizing issue
.input-group > .input-group-btn > .btn, .input-group-btn:last-child > .dropdown-toggle {
  height: 34px;
}
于 2014-09-08T18:24:40.410 回答
0 
.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:**0px**;margin-left:0}

位于 select.min.css 的第一行，将 margin-botton 设置为 0 ->问题已解决！

于 2014-05-05T09:22:46.357 回答