twitter bootstrap input-grupa-dodatek i btn-grupa nie wyrównując ładnie

mam wybrać pozycję, że mam stosowaną funkcję selectpicker dalej od
http://silviomoreto.github.io/bootstrap-select/
teraz staram się wyrównać wejścia-group-dodatek z selekcja, która zmieniła się w btn-group, , jednak wysokość addona nigdy nie jest taka sama jak wysokość grupy btn, używam twitter bootstrap 3.
Każdy, kto może mi doradzić, jak to zrobić, mój kod jest:twitter bootstrap input-grupa-dodatek i btn-grupa nie wyrównując ładnie

<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>

Źródło

2013-08-06 J.Pip

czy możesz podać jsfiddle? –

http://jsfiddle.net/Dzhz4/2/ problem polega na tym, że to pokazuje, jak tego chcę:/ –

Po prostu wypróbowałem to sam tworząc grupę przycisków i robi to, co chcę, więc to musi być problem z wtyczka jquery. Zrobię to bez niego –

Oto moja jsbin na jak naprawiłem go.jsbin

Po ustawieniu wejścia grupa rozmiarach albo „Input-grupy-LG” lub „input-grupy-SM” to daje predefiniowanych rozmiarów - w szczególności wysokość 46px lub 30px dla wejść odpowiednio. Jednak nic się nie stanie, jeśli zaakceptujesz standardowy rozmiar. Myślę, że tak jest, więc nie jesteś zaskoczony, jeśli masz ustawienia wejść poza Bootstrap.

Oto przykładowe pomiary dla LG

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

Zamiast szczypanie lg po fakcie, stworzyłem klasę o nazwie „input-grupa-reg” wykorzystuje pomiary, które stanowią kompromis pomiędzy „LG” i "sm" nadawany przez bootstrap.

.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; 
}

Źródło

2014-03-12 20:40:16 theptrk

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

jest na pierwszej linii select.min.css ustawienie margin-Botton do 0 -> Problem rozwiązany!

Źródło

2014-05-05 09:22:46 housecarl

Jak mówi @theptrk, nie jest ustawiona jawna wysokość dla przycisków w grupach wejściowych, gdy nie są używane input-group-sm lub input-group-lg. Udało mi się rozwiązać ten problem po prostu dodając to do moich zadajnikami bootstrap:

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

Źródło

2014-09-08 18:24:40

Brzmi jak używasz do znanego problemu z Bootstrap gdy jest kompilowane z niektórych kompilatorów Sass. Zobacz https://github.com/twbs/bootstrap-sass/issues/409.

Jeśli używasz bootstrap-sass, to właśnie to powoduje. Przed kompilacją Bootstrap musisz ustawić dokładność SASS na 10. To, jak je ustawisz, zależy od tego, na czym polega twoja konfiguracja (Gulp, Grunt, Laravel Elixir itd.).

Źródło

2015-09-04 20:50:54 orrd

twitter bootstrap input-grupa-dodatek i btn-grupa nie wyrównując ładnie

Odpowiedz

Powiązane problemy