Estoy usando Bootstrap y quiero crear el diseño de la cuadrícula se muestra en la siguiente imagen.

Me gustaría tener una barra lateral con un fijo con de 330px, no importa que los tamaños de pantalla y mantener todo dentro de #page-content re considerable dependiendo de la resolución de mi pantalla del visitante. Cómo forzar un ancho de columna fijo con una rejilla Bootstrap y mantener a los otros fluidos

¿Cómo puedo conseguir el diseño que se muestra en la imagen? Si hago lo siguiente:

<div class="col-md-10" id="page-content">
   <div class="col-md-2">...</div>
   <div class="col-md-10">...</div>
</div>
<div class="col-md-2" id="sidebar">
   ...
</div>

y tratar de fijar la anchura de #sidebar con width="330px"; para los pequeños tamaños de pantalla, el contenido se desplazará a la derecha, donde no pueda ser visto. Desde Bootstrap asigna width: 16.66666667%; a .col-md-2, me parece que se tendría que deshacerse del sistema de cuadrícula para el nivel superior divs, #page-content y #sidebar. Pero entonces, ¿cómo puedo asegurarme de que #page-content rellena el espacio que queda a la izquierda de #sidebar.

  • Me las he arreglado para fijar el ancho de una columna por la configuración de ambos min-width y max-width para el mismo valor. Funciona como un encanto. El Uso De Boostrap 4.
InformationsquelleAutor LaGuille | 2017-01-28

2 Comentarios

  1. 11

    Bootstrap de la cuadrícula estaban destinados a ser fluido, por lo que se supone que deben cambiar a medida que la pantalla cambia de tamaño.

    Para su diseño deseado, usted puede hacer que suceda el uso de display: flex o display:table lugar. Yo voy a ir con display:table para mi ejemplo, ya que hay más apoyo para que el flexbox.

    Usted necesitará cambiar tu HTML con algo como:

    <div class="page">
      <div class="page-content">
        <div class="row">
          <div class="col-md-2">
            <div class="blue">test</div>
          </div>
          <div class="col-md-10">
            <div class="green">test</div>
          </div>
        </div>
      </div>
      <div class="sidebar">
        <div class="gold">test</div>
      </div>
    </div>

    Y aquí está el CSS he utilizado:

    .page {
      display: table;
      width: 100%;
    }
    .page-content,
    .sidebar {
      display: table-cell;
    }
    .sidebar {
      width: 330px;
    }
    .blue,
    .green,
    .gold {
      height: 50px;
    }
    
    .blue {
      background-color: blue;
    }
    .green {
      background-color: green;
    }
    .gold {
      background-color: gold;
    }

    Usted puede descargar el violín aquí: https://jsfiddle.net/m0nk3y/qjutpze4/

  2. 24

    Bootstrap 4.0 beta:

    HTML:

    <div class="container-fluid">
      <div class="row">
        <div class="col my-sidebar">
          <h2>LEFT</h2>
          <h6>(FIXED 230px COLUMN)</h6>
        </div>
        <div class="col text-center">
          <h1>CENTER (FLUID COLUMN)</h1>
        </div>
        <div class="col my-sidebar">
          <h2>RIGHT</h2>
          <h6>(FIXED 230px COLUMN)</h6>
        </div>
      </div>
    </div>

    CSS:

    .my-sidebar {
        -ms-flex: 0 0 230px;
        flex: 0 0 230px;
        background-color: greenyellow; 
    } 
    
    @media (max-width: 690px) {
      .my-sidebar {
        display: none; 
      } 
    }

    Ejemplo en vivo aquí: https://www.codeply.com/view/PHYTWFDFRU

    En este ejemplo las columnas fijas desaparecerá si el ancho de la ventana del navegador se convierte en menos de 690px. Si quieres que sea siempre visible quitar la segunda css-bloque con @media completamente.

    • funciona, muchas gracias !
    • increíble, me encanta!

Dejar respuesta

Please enter your comment!
Please enter your name here