twitter bootstrap - qué - Forma correcta de agregar relleno al cuerpo Bootstrap para evitar el solapamiento de contenido y encabezado
qué son los canales de wifi (2)
En Bootstrap 2.3.x podemos arreglar este relleno con CSS:
body > .container {
padding-top: 40px;
background-color: white;
}
/*
* Responsive stypes
*/
@media (max-width: 980px) {
body > .container {
padding-top: 0;
}
.navbar-fixed-top {
margin-bottom: 0;
}
} /* END: @media (max-width: 980px) */
con el archivo HTML se ven así
<html>
<body>
<div class="navbar navbar-fixed-top">
...
</div>
<div class="container">
...
</div>
</body>
</html>
En el archivo CSS de Twitter class="navbar-fixed-top" línea del menú superior tiene class="navbar-fixed-top" con margin-bottom: 20px; cuando ancho de pantalla menos de 980px .
Espero que esto pueda ayudar a alguien.
Entiendo que para evitar que el contenedor principal en Bootstrap se encuentre en la parte superior del cuerpo y detrás de la barra de navegación, debe agregar relleno como se muestra a continuación:
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
El relleno debe declararse entre bootstrap.css y bootstrap-responsive.css para que el relleno no cause problemas en dispositivos más pequeños y, por lo tanto, interrumpa la capacidad de respuesta del sitio.
Mi pregunta:
Estoy utilizando el archivo combinde bootstrap.css descargado desde Bootstrap customize , que tiene el CSS responsivo y el css normal combinados en un solo archivo.
Debido a que se combinan en un archivo, significa que no puedo usar la solución que describí al comienzo de esta pregunta sin agregar realmente la corrección en el archivo bootstrap.css (no quiero agregarlo allí, larga historia) .
Así que estaba pensando en lugar de poner este código (con una solución @media para dispositivos más pequeños):
body { padding-top: 60px; }
@media (max-width: 979px) { body { padding-top: 0; } }
en mi propio archivo css (main.css) y lo incluye después de bootstrap.css, en el html, así:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
¿Crees que esta solución es aceptable?
Sí, tu solución es aceptable.
Por lo tanto, si tiene el uno o los dos archivos combinados de Bootstrap al principio y desea tener la barra de navegación, esta es la forma de evitar el relleno grande cuando se usa en pantallas más pequeñas:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
}
@media (max-width: 980px) {
body {
padding-top: 0;
}
}
</style>