Twitter Bootstrap CSS-fluido estático forma posicionamiento

Question

estoy usando el marco Twitter Bootstrap tratando de conseguir un diseño de la siguiente manera:

Así es como se ve ahora:

Current layout http://f.cl.ly/items/1n3y0F1I3D282g2U1J3Z/Screen%20Shot%202012-07-28%20at%209.09.10%20PM.png

jsFiddle fullscreen

jsFiddle

El ancho del contenedor de formulario cambia en función del ancho del navegador (consultas de medios CSS de Twitter Bootstrap). Los cuadros de iconos siempre tienen 14px de ancho.

He intentado diferentes cosas en base a los diseños CSS de ancho de banda estático/fluido para tratar de completar el ancho de entrada de texto.

Creo que mi única opción es hacer mis propias consultas de medios CSS que definan un ancho absoluto para la entrada de texto.

Answer 1

Al igual que con muchos marcos CSS, debe tener mucho cuidado con padding. Quitar esto

.patch-well { 
    padding: 20px; 
} 

Answer 2

de arranque también le permite simular los anchos mínimos de objetos al no requerir que usted pueda hacer que todo el líquido de diseño. En tu caso, puedes intentar hacer que la envoltura abarque y reine para que la navegación no sea fluida.

Answer 3

Pone toda la forma en span3, es aproximadamente el 25% del ancho de fila. Por lo tanto, si la resolución es grande, span3 no es suficiente para contener toda la forma. En resoluciones más pequeñas, el ancho de span3 se convierte en 100%, y en pequeñas resoluciones se ve bien. Simplemente use alguna otra clase de tramo y cuidadosamente calcule cuidadosamente los números en las clases de tramo. Like here Además, prefiero usar la clase de fila líquida en lugar de la clase de fila, es más fácil de manipular con ancho.

Siempre use estructura como esta

<div class="row-fluid"> 
    <div class"span3"> 
    <!-- content1 --> 
    </div> 
    <div class"span9"> 
    <div class="row-fluid"> 
     <div class="span6"> 
      <!-- content2 --> 
     </div 
     <div class="span6"> 
      <!-- content3 --> 
     </div 
    </div> 
    </div> 
</div> 

Tenga en cuenta que siempre si quiero nueva línea en el diseño sin flotar, y si quiero 100% del elemento desde los padres ancho, utilizaré fila-fluido. Debido a que los elementos secundarios pueden ser elementos de nuevo intervalo, la suma de los 12. En este ejemplo, "content1" usará un 25% de ancho en resoluciones grandes, pero en resoluciones pequeñas tendrá un ancho del 100%. En grandes resoluciones, "content2" y "content3" tendrán el 100% del ancho de los padres, pero eso es el 75% del ancho del contenedor. En resoluciones pequeñas, todas las clases de tramo tendrán un ancho del 100%. Si no desea eso en algunos casos, simplemente anule el bootstrap css por defecto con sus clases.

Espero que entiendas cuál es mi punto. Perdón por mi inglés :)

Answer 4

Esto es lo que quieres http://jsfiddle.net/YxKfc/14/, Por favor verifícalo.