Tengo un select item que he aplicado la selectpicker función de
http://silviomoreto.github.io/bootstrap-select/
ahora estoy tratando de alinear la entrada-grupo-addon con el select, que se convirtió en una btn-group,
sin embargo, el addon de altura nunca es el mismo que el btn-group altura, estoy usando twitter bootstrap 3.
Alguien que me pueda asesorar sobre cómo hacer esto, mi código es:

<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>
puede usted proporcionar jsfiddle para esto?
jsfiddle.net/Dzhz4/2 problema es que esto muestra cómo la quiero :/
Yo sólo lo intentó con la creación del grupo de botones de mí mismo y hace lo que quiero, así que esto debe ser un problema con el plugin de jquery. Yo voy a hacer sin ti
Asegúrese de que usted no ha realizado ningún cambio en el CSS para efecto de los elementos, también el uso de algún tipo de desarrollo web herramienta de depuración de correo.g incorporado inspeccionar elemento en chrome, firefox o IE 11.
Estoy teniendo el mismo problema – puede usted explicar su solución de crear el botón de grupo? Y/o ¿usted averiguar cómo resolver el jquery problema?

OriginalEl autor J.Pip | 2013-08-06

4 Comentarios

  1. 6

    Aquí está mi jsbin por como me fijo. jsbin

    Cuando se establece la entrada-el tamaño de los grupos, ya sea con la entrada del grupo de lg’ o ‘input-group-sm’ le dará tamaños predefinidos – especialmente la de una altura de 46px o 30px para las entradas respectivamente. Sin embargo, no sucede nada si se acepta el tamaño normal. Creo que esto es por lo que no se sorprenda si usted tiene la configuración de entradas fuera de Bootstrap.

    Aquí son un ejemplo de mediciones para lg

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

    Lugar de los ajustes de lg, después del hecho, he creado una clase llamada ‘input-group-reg’ utiliza las mediciones que están en un terreno intermedio entre el ‘lg’ y ‘sm’ dada por 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;
    }

    OriginalEl autor theptrk

  2. 4

    Suena como que usted está ejecutando en un problema conocido con Bootstrap cuando es compilado con algunos SASS compiladores. Ver https://github.com/twbs/bootstrap-sass/issues/409.

    Si usted está usando bootstrap-sass, que es la que está causando. Usted tiene que fijar el SASS de precisión hasta 10 antes de la compilación de Bootstrap. Cómo se establezca depende de lo que su puesta en marcha es de (Gulp, Grunt, Laravel Elixir, etc.).

    OriginalEl autor orrd

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

    está en primera línea de seleccionar.min.css
    ajuste de margen-boton para 0 ->problema resuelto!

    OriginalEl autor housecarl

  4. 0

    Como @theptrk dice, parece una explícita altura no se establece para los botones en grupos de entrada cuando no se utiliza input-group-sm o input-group-lg. Yo era capaz de arreglar simplemente añadiendo esto a mi bootstrap reemplaza:

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

    OriginalEl autor Kris Braun

Dejar respuesta

Please enter your comment!
Please enter your name here