8


http://silviomoreto.github.io/bootstrap-select/ から selectpicker 関数を適用した選択項目があります。
今、input-group-addon を選択に合わせようとしています。 btn-group ですが、アドオンの高さが btn-group の高さと同じになることはありません。私は twitter ブートストラップ 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' のいずれかに設定すると、定義済みのサイズが得られます。最も顕著なのは、それぞれ入力の高さが 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 を微調整する代わりに、ブートストラップによって与えられる「lg」と「sm」の中間の測定値を使用する「input-group-reg」というクラスを作成しました。

.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 の精度を 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 に答える