css - popovers - tags bootstrap
Twitter Bootstrap-fronteras (2)
Otra solución que encontré esta noche, que funcionó para mis necesidades, fue agregar atributos de box-sizing :
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
Estos atributos obligan al borde a ser parte del ancho y alto del modelo de caja y también corrigen el problema.
Según caniuse.com »tamaño de box-sizing , tamaño de box-sizing es compatible con IE8 +.
Si estás usando LESS o Sass, hay una mezcla de Bootstrap para esto.
MENOS:
.box-sizing(border-box);
Hablar con descaro a:
@include box-sizing(border-box);
Acabo de empezar a usar Twitter Bootstrap, y tengo una pregunta sobre cómo agregar mejor un borde a un elemento principal.
por ejemplo, si tengo
<div class="main-area span12">
<div class="row">
<div class="span9">
//Maybe some description text
</div>
<div class="span3">
//Maybe a button or something
</div>
</div>
</div>
Si aplico un borde así:
.main-area {
border: 1px solid #ccc;
}
El sistema de cuadrícula se romperá y span3 hasta la siguiente fila debido al ancho adicional del borde ...... ¿Hay una buena manera de poder agregar cosas como bordes o relleno al padre <div> s como ¿esta?
Si miras la propia demo de container-app.html en GitHub, obtendrás algunas ideas sobre el uso de fronteras con su grilla.
Por ejemplo, aquí está la parte extraída de los bloques de construcción de su sistema de grillas de 16 columnas de 940 píxeles de ancho:
.row {
zoom: 1;
margin-left: -20px;
}
.row > [class*="span"] {
display: inline;
float: left;
margin-left: 20px;
}
.span4 {
width: 220px;
}
Para permitir bordes en elementos específicos, agregaron CSS incrustado a la página que reduce las clases coincidentes por cantidad suficiente para dar cuenta de los bordes.
Por ejemplo, para permitir el borde izquierdo en la barra lateral, agregaron este CSS en el <head> después del principal <link href="../bootstrap.css" rel="stylesheet"> .
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
}
Verá que han reducido el padding-left 1px para permitir la adición del nuevo borde izquierdo. Como esta regla aparece más adelante en el orden de origen, anula cualquier declaración anterior o externa.
Yo diría que este no es exactamente el enfoque más robusto o elegante, pero ilustra el ejemplo más básico.