bootstrap - title html attribute

¿Cómo crear un diseño de barra lateral fija con Bootstrap 4?

Question

Estoy tratando de crear un diseño como la captura de pantalla con Bootstrap 4, pero tengo algunos problemas para corregir la barra lateral y lograr este diseño al mismo tiempo.

Yendo con un ejemplo básico:

<div class="container">
  <div class="row">
    <div class="col-m-4" id="sticky-sidebar">
      Sidebar
    </div>
    <div class="col-m-8" id="main">
      Main Area
    </div>
  </div>
</div

Es posible obtener este diseño, pero las cosas se ponen difíciles una vez que declaro:

.sidebar {
position: fixed // or absolute
}

Una vez que la barra lateral esté pegajosa, el div principal comienza a aparecer detrás de la barra lateral en lugar de a su lado. Por supuesto, es posible declarar un margen y devolverlo a su posición original, pero hace que las cosas sean complicadas para la capacidad de respuesta.

Siento que me estoy perdiendo algo, leí la documentación de Bootstrap 4 pero no pude encontrar una forma sencilla de lograr este diseño.

Answer 1

¿algo como esto?

#sticky-sidebar {
position:fixed;
max-width: 20%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="col-xs-12" id="sticky-sidebar">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
    <div class="col-xs-8" id="main">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div

Answer 2

Mi version:

div#dashmain { margin-left:150px; }
div#dashside {position:fixed; width:150px; height:100%; }

<div id="dashside"></div>
<div id="dashmain">                        
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">Content</div>
        </div>            
    </div>        
</div>

Answer 3

Actualizado 2018

Aquí hay una respuesta actualizada para la última versión de Bootstrap 4.0.0 . Esta versión tiene clases que te ayudarán a crear una barra lateral fija o fija sin el CSS adicional ...

Use sticky-top :

<div class="container">
    <div class="row py-3">
        <div class="col-3 order-2" id="sticky-sidebar">
            <div class="sticky-top">
                ...
            </div>
        </div>
        <div class="col" id="main">
            <h1>Main Area</h1>
            ...   
        </div>
    </div>
</div>

Demostración: https://www.codeply.com/go/O9GMYBer4l

o , use position-fixed :

<div class="container-fluid">
    <div class="row">
        <div class="col-3 px-1 bg-dark position-fixed" id="sticky-sidebar">
            ...
        </div>
        <div class="col offset-3" id="main">
            <h1>Main Area</h1>
            ...
        </div>
    </div>
</div>

Ver también:
Columna fija y desplazable en Bootstrap 4 flexbox
Bootstrap col posición fija
Cómo usar la posición CSS pegajosa para mantener una barra lateral visible con Bootstrap 4
¿Crear un "cajón" de barra lateral de la barra de navegación de respuesta en Bootstrap 4?