Twitter bootstrap input-gruppo-addon e BTN-gruppo non allineamento ben

ho una voce di selezione che ho applicato la funzione selectpicker sul da
http://silviomoreto.github.io/bootstrap-select/
ora sto cercando di allineare l'ingresso-gruppo-addon con la selezione, che è diventata un gruppo btn, tuttavia l'altezza dell'addon non è mai uguale all'altezza del gruppo btn, sto usando twitter bootstrap 3.
Chiunque possa consigliarmi su come farlo, il mio codice è:Twitter bootstrap input-gruppo-addon e BTN-gruppo non allineamento ben

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

fonte

2013-08-06 J.Pip

puoi fornire jsfiddle per questo? –

http://jsfiddle.net/Dzhz4/2/ problema è questo mostra come lo voglio:/ –

Ho appena provato con la creazione del gruppo pulsante me stesso e fa quello che voglio, quindi questo deve essere un problema con il plugin jquery. Lo farò senza di esso –

Ecco il mio jsbin per come ho riparato.jsbin

Quando si imposta l'ingresso-gruppo formati sia 'ingresso-gruppo-lg' o 'input-gruppo-sm' vi darà dimensioni predefinite - particolare un'altezza di 46px o 30px degli ingressi rispettivamente. Tuttavia non succede nulla se si accetta la dimensione normale. Penso che sia così che non ti sorprenda se disponi di impostazioni per gli input al di fuori di Bootstrap.

Qui ci sono esempi di misure per LG

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

Invece di tweaking LG dopo il fatto, ho creato una classe chiamata 'input-gruppo-reg' utilizza le misure che sono una via di mezzo tra il 'LG' e 'sm' dato dal 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; 
}

fonte

2014-03-12 20:40:16 theptrk

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

inizia prima linea di select.min.css impostazione margin-bottone a 0 -> problema risolto!

fonte

2014-05-05 09:22:46 housecarl

Come dice @theptrk, sembra che un'altezza esplicita non venga impostata per i pulsanti nei gruppi di input quando non si utilizza input-group-sm o input-group-lg. Sono stato in grado di risolvere questo problema semplicemente aggiungendo questo ai miei sostituzioni di bootstrap:

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

fonte

2014-09-08 18:24:40

Sembra che si sta eseguendo in un problema noto con Bootstrap quando è compilato con alcuni compilatori Sass. Vedi https://github.com/twbs/bootstrap-sass/issues/409.

Se si sta utilizzando bootstrap-sass, è quello che lo sta causando. È necessario impostare la precisione SASS su 10 prima di compilare Bootstrap. Il modo in cui lo imposti dipende da quale è il tuo particolare set up (Gulp, Grunt, Laravel Elixir, ecc.).

fonte

2015-09-04 20:50:54 orrd

Twitter bootstrap input-gruppo-addon e BTN-gruppo non allineamento ben

risposta

Problemi correlati