J'utilise le cadre de bootstrap Twitter essayant d'obtenir une mise en page comme celle-ci:
P>
Voici comment il regarde maintenant: P>
jsfiddle p>
La largeur du conteneur de formulaire passe basée sur la largeur du navigateur (Twitter Bootstrap's Requêtes médiatiques CSS). Les boîtes d'icônes ont toujours 14 px de largeur. P>
J'ai essayé différentes choses en fonction de la barre latérale de largeur statique / de la teneur en fluide CSS pour essayer de rendre la largeur de l'entrée de texte remplir. P >
Je pense que ma seule option consiste à faire mes propres requêtes médiatiques CSS qui définissent une largeur absolue pour l'entrée de texte. P>
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
body { padding: 10px }
.patch-well {
color: #FFF;
background: url('http://subtlepatterns.com/patterns/darkdenim3.png') repeat;
padding: 20px;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.input-prepend {
}
.input-prepend .add-on {
}
.input-prepend input {
}
4 Réponses :
Comme avec de nombreux cadres CSS, vous devez faire très attention avec PADDING CODE> STRUT>. Emportez-le .patch-well {
padding: 20px;
}
BOOTSTRAP vous permet également de simuler des largeurs minimales pour des objets en ne vous obligeant pas à effectuer l'ensemble du fluide de mise en page. Dans votre cas, vous pouvez essayer de faire la couverture et la rangée de la navigation pour cette navire ne pas être fluide.
Vous mettez une forme entière en SPAN3, il s'agit d'environ 25% de la largeur de la rangée. Par conséquent, si la résolution est grande, SPAN3 ne suffit pas à contenir une forme entière. Sur des résolutions plus petites, la largeur de SPAN3 devient 100% et sur de petites résolutions. Il suffit d'utiliser une autre classe d'espaces et faites attention soigneusement calculé les numéros en cours d'envers. comme ici également, je préfère utiliser la classe de fluide de ligne au lieu de la classe de lignes, c'est plus facile manipuler avec la largeur.
Utilisez toujours une structure comme celle-ci Notez que toujours si je veux une nouvelle ligne dans la conception sans flotter, et si je veux 100% de la largeur de la largeur Élément parent, je vais utiliser le fluide de ligne. Étant donné que les éléments d'enfants peuvent être à nouveau sur les éléments de l'oscillation de la somme de 12. Dans cet exemple, "Content1" utilisera 25% de largeur dans de grandes résolutions, mais dans de petites résolutions, elle aura 100% de largeur. Dans de grandes résolutions, "Content2" et "Content3" auront 100% de la largeur des parents, mais qui représente 75% de la largeur du conteneur. En petites résolutions, toutes les classes d'étendues auront 100% de largeur. Si vous ne voulez pas que dans certains cas, remplissez simplement la bosselle par défaut CSS avec les classes de vos cours. J'espère que vous comprenez ce que c'est mon point. Désolé pour mon anglais :)
C'est ce que vous voulez http://jsfiddle.net/yxkfc/14/ , s'il vous plaît Vérifiez-le.
Répondit une question similaire ici . À un moment donné, une réponse est inutile et vous devriez fixer des tailles (au moins des tailles min). Mieux vaut avoir une page pour faire défiler une entrée avec 2 lettres. Imho fluide +
min-largeur est votre meilleure option.Vérifiez la minute de la largeur des commandes. Ils semblent avoir cessé de redimensionner, mais le conteneur continue de se contracter.