twitter-bootstrap - filas - layout bootstrap
Bootstrap 3.0-Cuadrícula de fluido que incluye tamaños de columna fijos (8)
¿Por qué no simplemente establecer las dos columnas a la izquierda en su propio CSS y luego hacer un nuevo diseño de cuadrícula de las 12 columnas completas para el resto del contenido?
<div class="row">
<div class="fixed-1">Left 1</div>
<div class="fixed-2">Left 2</div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
</div>
Estoy aprendiendo cómo usar Bootstrap. Actualmente, estoy abriéndome camino a través de diseños. Si bien Bootstrap es genial, todo lo que veo parece anticuado. Por mi vida, tengo lo que creo que es un diseño básico que no puedo descifrar. Mi diseño se ve así:
---------------------------------------------------------------------------
| | | |
| | | |
| 240px | 160px | All Remaining Width of the Window |
| | | |
| | | |
--------------------------------------------------------------------------|
Esta cuadrícula necesita ocupar toda la altura de la ventana. Según entiendo, necesito mezclar anchos fijos y fluidos. Sin embargo, Bootstrap 3.0 ya no parece tener la clase fluida. Incluso si lo hiciera, parece que no puedo entender cómo mezclar los tamaños de columna fijos y fluidos. ¿Alguien sabe cómo hacer esto en Bootstrap 3.0?
ACTUALIZACIÓN 2014-11-14: La solución a continuación es demasiado antigua, recomiendo usar el método de diseño de cuadro flexible. Aquí hay una descripción general: http://learnlayout.com/flexbox.html
Mi solución
html
<li class="grid-list-header row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
<li class="grid-list-item row-cw row-cw-msg-list ...">
<div class="col-md-1 col-cw col-cw-name">
<div class="col-md-1 col-cw col-cw-keyword">
<div class="col-md-1 col-cw col-cw-reply">
<div class="col-md-1 col-cw col-cw-action">
</li>
scss
.row-cw {
position: relative;
}
.col-cw {
position: absolute;
top: 0;
}
.ir-msg-list {
$col-reply-width: 140px;
$col-action-width: 130px;
.row-cw-msg-list {
padding-right: $col-reply-width + $col-action-width;
}
.col-cw-name {
width: 50%;
}
.col-cw-keyword {
width: 50%;
}
.col-cw-reply {
width: $col-reply-width;
right: $col-action-width;
}
.col-cw-action {
width: $col-action-width;
right: 0;
}
}
Sin modificar demasiado el código de disposición de arranque.
Actualización (no desde OP): agregar fragmento de código a continuación para facilitar la comprensión de esta respuesta. Pero no parece funcionar como se esperaba.
ul {
list-style: none;
}
.row-cw {
position: relative;
height: 20px;
}
.col-cw {
position: absolute;
top: 0;
background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
padding-right: 270px;
}
.col-cw-name {
width: 50%;
background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
width: 50%;
background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
width: 140px;
right: 130px;
background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
width: 130px;
right: 0;
background-color: rgba(150, 150, 0, .5);
}
<ul class="ir-msg-list">
<li class="grid-list-header row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
<li class="grid-list-item row-cw row-cw-msg-list">
<div class="col-md-1 col-cw col-cw-name">name</div>
<div class="col-md-1 col-cw col-cw-keyword">keyword</div>
<div class="col-md-1 col-cw col-cw-reply">reply</div>
<div class="col-md-1 col-cw col-cw-action">action</div>
</li>
</ul>
OK, mi respuesta es súper agradable:
<style>
#wrapper {
display:flex;
width:100%;
align-content: streach;
justify-content: space-between;
}
#wrapper div {
height:100px;
}
.static240 {
flex: 0 0 240px;
}
.static160 {
flex: 0 0 160px;
}
.growMax {
flex-grow: 1;
}
</style>
<div id="wrapper">
<div class="static240" style="background:red;" > </div>
<div class="static160" style="background: green;" > </div>
<div class="growMax" style="background:yellow;" ></div>
</div>
si quieres soporte para todos los navegadores, usa https://github.com/10up/flexibility
Realmente no hay una manera fácil de mezclar anchuras fluidas y fijas con Bootstrap 3. Tiene la intención de ser así, ya que el sistema de cuadrícula está diseñado para ser fluido y sensible. Podría tratar de piratear algo, pero iría en contra de lo que intenta hacer el sistema de cuadrícula receptiva, cuya intención es hacer que el diseño fluya a través de diferentes tipos de dispositivos.
Si necesita seguir con este diseño, consideraría diseñar su página con CSS personalizado y no utilizar la cuadrícula.
Tuve un problema ligeramente diferente:
- Necesitaba combinar columnas fijas y fluidas como parte de una tabla en lugar de como parte de un diseño de ventana completa
- Necesitaba tener columnas fijadas tanto a la izquierda como a la derecha
- No estaba preocupado por los fondos de columna usando la altura completa de la fila que contiene
Como resultado, recurrí a las columnas izquierda y derecha, y pude usar la row de Bootstrap para hacer las columnas de fluido en el medio.
<div>
<div class="pull-left" style="width:240px">Fixed 240px</div>
<div class="pull-right" style="width:120px">Fixed 120px</div>
<div style="margin-left:240px;margin-right:120px">
<div class="row" style="margin:0px">
Standard grid system content here
</div>
</div>
</div>
o use la propiedad de visualización con table-cell;
css
.table-layout {
display:table;
width:100%;
}
.table-layout .table-cell {
display:table-cell;
border:solid 1px #ccc;
}
.fixed-width-200 {
width:200px;
}
html
<div class="table-layout">
<div class="table-cell fixed-width-200">
<p>fixed width div</p>
</div>
<div class="table-cell">
<p>fluid width div</p>
</div>
</div>
editar: Como muchas personas parecen querer hacer esto, he escrito una breve guía con un caso de uso más general aquí https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Espero eso ayude.
El sistema de cuadrícula bootstrap3 admite anidamiento de fila que le permite ajustar la fila raíz para permitir menús de ancho fijo.
Debe colocar un relleno a la izquierda en la fila de la raíz y luego tener una fila secundaria que contenga los elementos de diseño de la cuadrícula normal.
Así es como suelo hacer esto http://jsfiddle.net/u9gjjebj/
html
<div class="container">
<div class="row">
<div class="col-fixed-240">Fixed 240px</div>
<div class="col-fixed-160">Fixed 160px</div>
<div class="col-md-12 col-offset-400">
<div class="row">
Standard grid system content here
</div>
</div>
</div>
</div>
css
.col-fixed-240{
width:240px;
background:red;
position:fixed;
height:100%;
z-index:1;
}
.col-fixed-160{
margin-left:240px;
width:160px;
background:blue;
position:fixed;
height:100%;
z-index:1;
}
.col-offset-400{
padding-left:415px;
z-index:0;
}
Actualizado 2018
OMI, la mejor manera de abordar esto en Bootstrap 3 sería utilizar consultas de medios que se alineen con los puntos de interrupción de Bootstrap para que solo use las columnas de ancho fijo sean pantallas más grandes y luego permita que el diseño se apile de manera receptiva en pantallas más pequeñas. De esta manera mantienes la capacidad de respuesta ...
@media (min-width:768px) {
#sidebar {
width: inherit;
min-width: 240px;
max-width: 240px;
min-height: 100%;
position:relative;
}
#sidebar2 {
min-width: 160px;
max-width: 160px;
min-height: 100%;
position:relative;
}
#main {
width:calc(100% - 400px);
}
}
Demostración de fluido fijo de trabajo Bootstrap
Bootstrap 4 tendrá flexbox para que los diseños como este sean mucho más fáciles: http://www.codeply.com/go/eAYKvDkiGw