さえずりブートストラップ入力グループアドオンとBTN-グループがうまく

Question

を合わせていない私は、今私が入力グループアドオンを揃えるためにしようとしている
http://silviomoreto.github.io/bootstrap-select/
から上selectpicker機能を適用した選択項目があります選択肢はbtnグループになりました アドオンの高さは決してbtnグループの高さと同じではありません、私は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> 

Answer 1

は、ここで私はそれを修正する方法のための私のjsbinです。それぞれの入力のための46pxか30pxの最も顕著な高さ - jsbin

あなたが入力グループは、それはあなたに事前に定義された大きさを与える「入力グループ-LG」または「入力グループ-SM」のいずれかのサイズ設定。しかし、あなたは通常のサイズを受け入れる場合は何も起こりません。私はこれがBootstrap以外の入力に関する設定をしていれば驚くことではないと思います。

ここ

代わりに事実の後LGを微調整のLG

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

ための例示的な測定値であり、I「は入力基REG」と呼ばれるクラスは「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

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

0に余裕-ボタンを設定select.min.css の最初の行にある - >問題解決！

Answer 3

@theptrkによると、input-group-smまたはinput-group-lgを使用しない場合、入力グループ内のボタンに明示的な高さが設定されていないようです。私はちょうど私のブートストラップ・オーバーライドにこれを追加することによってこの問題を解決することができました：

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

Answer 4

それはいくつかのSASSのコンパイラでコンパイルだときに、ブートストラップの既知の問題に実行しているようですね。 https://github.com/twbs/bootstrap-sass/issues/409を参照してください。

あなたがbootstrap-sassを使用している場合、それが原因です。ブートストラップをコンパイルする前に、SASS精度を10に設定する必要があります。どのように設定するかは、あなたの設定が何であるか（Gulp、Grunt、Laravel Elixirなど）によって異なります。