css - div - ¿Cómo hacer una columna de ancho fijo con un fluido de contenedor?

flexbox bootstrap 4

Question

Estoy tratando de tener una columna lateral a la izquierda con un ancho fijo, y luego, a la derecha, un container-fluid Bootstrap normal.

Incluso si la barra lateral no está dentro de la estructura de Bootstrap, está bien. Quiero decir que no tiene que ser con la clase col-xx-xx .

Lo que sea que haga, el problema principal es que no logro que el contenedor de líquido se quede al lado de la barra lateral.

El punto también es que si no muestro ninguno en la barra lateral, el contenedor de fluido tiene que usar todo el ancho de la página.

Answer 1

Intente incluir el container-fluid su container-fluid en un div con margin-left: 200px (donde 200 px es el ancho de la barra lateral).

Luego coloque su barra lateral con position: absolute por ejemplo

Answer 2

Un diseño de fluido fijo es posible en Bootstrap 3 , pero ahora que Bootstrap 4 es flexbox, este diseño es mucho más fácil. Solo necesita habilitar flexbox y realizar algunos ajustes simples para establecer el ancho de la columna lateral fija flex: 0 0 300px; , y luego flex: 1; en su columna principal para llenar el ancho restante ...

Bootstrap 4 Alpha 2 http://codeply.com/go/eAYKvDkiGw

Aquí hay una actualización más simple para el último Bootstrap 4 que es flexbox por defecto:

Bootstrap 4 Alpha 6 o Beta http://codeply.com/go/V9UQrvLWwz

 @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

También vea: ¿Cómo construir un diseño de 2 columnas (fijo - fluido) con Twitter Bootstrap?

Ejemplo de actualización 2018 Bootstrap 4.0.0