Entrada de entrada de fluido en Bootstrap Responsive

Question

He estado luchando para obtener una entrada con un elemento input-append para tener el ancho correcto en un diseño fluido. Estoy usando v2.0.4 de Bootstrap. A medida que cambio el tamaño para hacer que la página sea más pequeña, se rompe en una nueva línea. Idealmente, tendría la entrada del ancho completo del pozo (como las alertas). He incluido el marcado y algunas capturas de pantalla a continuación. Cualquier ayuda muy apreciada!

<div class="row-fluid"> 
    <div class="span3 well"> 
     <form class="form-horiztonal"> 
      <h2>Filters</h2> 
      <fieldset> 
       <div class="control-group"> 
        <label class="control-label" for="msisdn">MSISDNs</label> 
        <div class="controls"> 
         <div class="input-append"> 
          <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button 
          class="btn btn-primary" type="submit"><i class="icon-plus icon-white"></i></button> 
         </div> 
        </div> 
       </div> 
      </fieldset> 
     </form> 
    </div> 

    <div class="span9"></div> 
</div> 

Answer 1

El css sensible es lo que tropezar con esto.

Sobreescribiendo algunas de las css de respuesta utilizando

#msisdn { 
    width: 75%; 
    display: inline-block; 
    } 

con suerte se puede ver lo que está pasando. Esto te acercará lo suficiente con suerte.

Answer 2

Dado que su input es un .span10, el botón debe ser un .span2.

<div class="input-append"> 
    <input class="span10" id="msisdn" size="" type="text" name="msisdn"><button class="btn btn-primary span2" type="submit"><i class="icon-plus icon-white"></i></button> 
</div> 

Sin embargo, el comportamiento del botón cambia radicalmente. Se puede arreglar con este CSS:

.input-append .btn { 
    float: none!important; 
    margin-left: 0!important; 
} 

Y para ser aún más preciso, el botón debe ser tan grande como un .span2 más el fluidGridGutterWidth. Que es width: 17.02127659% según los valores predeterminados.

Answer 3

reemplazar <form class="form-horiztonal"> con <form id="formfilters" class="form-horiztonal">

Añadir el siguiente código de jQuery.

function sizing() { 
    var formfilterswidth=$("#formfilters").width(); 
    $("#msisdn").width((formfilterswidth-46)+"px"); 
} 
$(document).ready(sizing); 
$(window).resize(sizing);​ 

Y Allways se ve bien

Pequeño:

grande:

Answer 4

Tengo una respuesta y un nuevo problema para resolver.

He creado una función que buscará todos los input-append y los redimensionará según su parent(). Width().

aquí:

function sizeInputs() { 
    $(document).find(".input_app").each(function(){ 
    var container_width = $(this).parent().innerWidth(); 
    var btn_width = $(this).parent().find(".btn_app").width(); 
    // I don't know why but I need to add 25 here...??? 
    $(this).css('width', container_width-(btn_width + 25)); 
    }); 

Sólo necesita la clase de su entrada es como ".input_app" y el botón de relacionados como ".btn_app" y colocarlos en un div.

Esto funciona en todas partes excepto en las tablas. Dado que el ancho de la tabla está dictado por el ancho de su elemento, es el dilema del huevo y el pollo. Si agranda la tabla, funciona, pero si reduce su ancho, no lo hace.

Todo esto se puede ver en violín input-append

Si alguien tiene una idea sobre cómo resolver la tabla cambiar el tamaño de problema será muy apreciada.

Answer 5

Esta es una solución pura de CSS que funciona increíblemente, sin desagradables jQuery/JavaScript para propósitos de diseño.

http://jsfiddle.net/9Ma8V/

El HTML

<div class="inline-button-input"> 
    <input type="submit" value="Submit"/> 
    <div> 
     <input type="text"/> 
    </div> 
</div> 

El CSS

input[type=text] { 
    width: 100%; 
} 
.inline-button-input { 
    width: 100%; 
    float: right; 
} 
.inline-button-input div { 
    overflow: hidden; 
    padding-right: .5em; 
} 
.inline-button-input input[type=submit] { 
    float: right; 
}