2

La imagen 1 es mi diseño actual cuando el tamaño de la pantalla es grande , (quiero que esta parte se mantenga asi) y hacer que que cuando la pantalla sea de un tamaño mas pequeño en vez de un comportamiento de columna(uno sobre otro)sea de row (2 sea como la imagen 2 uno al lado de otro)que el comportamiento para pantallas mas pequennas sea de la forma de la imagen de abajo... o que el contenido se ponga debajo de mi <main></main> o que se esconda como un sidebar igual me pudiera ser util.

imagen 1

para pantalla grande se mantenga asi..

 
 <link rel="stylesheet" href="https://bootswatch.com/4/spacelab/bootstrap.min.css">
<!-- Container Principal -->
<div class="container-fluid my-5">	
	<div class="row">	
		<!-- Sidebar -->
	<div class="col-sm-12 col-lg-2 col-xl-2">
		<div class="card my-4">
			<div class="card-header"><i class="fas fa-user"></i>User</div>
			<div class="card-body">
			  <h4 class="card-title">Links</h4>
			  <p class="card-text">Some quick example</p>
			</div><!-- card body-->
		  </div><!-- card -->
		  
		  <div class="card my-4">
			<div class="card-header">Otros</div>
			<div class="card-body">
			  <p class="card-text">text</p>
			</div>
		  </div><!-- card -->
	</div>
	
	<main role="main" class="ml-sm-auto col-lg-10 pr-4"></main>
  </div>
  </div>

imagen r

para pantalla sea pequeña quede asi...

5
  • Has intentado algo? Estás preguntando varias cosas en una sola publicació, por favor trata de ser más claro para que podamos brindarte una posible solución. el 21 oct. 2019 a las 15:33
  • si esta imagen que vez arriba la numero 3 la hice cambiando varias cosas y agregando d-flex flex-row a la clase que la contiene pero me distorsiona el diseño para pantalla grande.. cree un nuevo div row pero me igual me distorsiona.. poniendo clases flex a los card tampoco funciona..
    – RazerJs
    el 21 oct. 2019 a las 15:42
  • Puedes subir el código HTML de tu <main>? Ya revisaste trabajar con los breakpoints de Bootstrap para cada una de las vistas? el 21 oct. 2019 a las 16:02
  • puedo subirlo pero todo el problema se encuentra en esa columna donde estan las cards
    – RazerJs
    el 21 oct. 2019 a las 19:45
  • no se nada de los breakpoints de bootstrap @JheymanMejia
    – RazerJs
    el 21 oct. 2019 a las 20:15

1 respuesta 1

5

Te propongo esto, ya que usas Bootstrap en su versión 4 usemos únicamente las clases de su sistema de cuadrícula (grid system).

Como bien sabemos, Bootstrap divide la pantalla del dispositivo hasta en 12 columnas. En tu layout estás usando dos columnas principales:

La columna del sidebar (ocupando 2/12) y la columna en la que tienes tu main (ocupando 10/12).

Esto para dispositivos con un ancho superior a 992px en su pantalla.

layout para escritorio

A partir de allí empezamos a jugar con los puntos de quiebre responsivos o Responsive Breakpoints, basándonos en su cuadrícula de columnas, usando las siguientes clases:

.col-lg-2 y .col-lg-10 (desde 1200px)
.col-md-3 y .col-md-9 (desde 768px)
.col-sm-12 y .col-sm-12 (desde 576px)

Anotación: La última clase la uso para que ocupe todo el ancho del dispositivo y por ende "arrastre" los elementos restantes creando una nueva fila. Aunque no es la opción más bonita, es totalmente válida.


Al meollo...

Una vez entendido esto, podemos decir que la primer columna, el sidebar, puede incluir o anidar dentro de sí misma más columnas, es por ello que la dividí en dos dos columnas internas, a las cuales se les puede aplicar las mismas reglas de los puntos de quiebre.

Este sería el layout simplificado (Ejecuta a pantalla completa y revisa los puntos de quiebre reduciendo la ventana).

.bordes{ 
  height: 100px; 
  border: 1px solid;
}

main > .bordes{
  height: 200px;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://bootswatch.com/4/spacelab/bootstrap.min.css">
</head>

<!-- CONTENEDOR -->
<div class="container-fluid my-5">

  <!-- ROW PRINCIPAL -->
  <div class="row">    

    <!-- COLUMNA 1 EXTERNA -->
    <div class="col-sm-12 col-md-3 col-lg-2">

      <!-- row interno -->
      <div class="row">        

        <!-- col1 interna -->
        <div class=" col-6 col-sm-6 col-md-12">          
          <div class="bordes">CARD</div>
        </div>

         <!-- col2 interna -->
        <div class="col-6 col-sm-6 col-md-12">         
          <div class="bordes">CARD</div>
        </div>       

      </div>     

    </div>

    <!-- COLUMNA 2 EXTERNA -->
    <main role="main" class="col-sm-12 col-md-9 col-lg-10">
      <div class="bordes">MAIN</div>
    </main>

  </div>
</div>

Así quedaría entonces tu código:

main {
  background-color: #ebebeb;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<!-- Container Principal -->
<div class="container-fluid my-5">

  <div class="row">
    <!-- row principal -->

    <!-- Columna 1 externa -->
    <div class="col-sm-12 col-md-4 col-lg-2">

      <div class="row">
        <!-- row interno -->
        <!-- col1 interna -->
        <div class=" col-6 col-sm-6 col-md-12">
          <div class="card my-4">
            <div class="card-header"><i class="fas fa-user"></i>User</div>
            <div class="card-body">
              <h4 class="card-title">Links</h4>
              <p class="card-text">Some quick example</p>
            </div>
            <!-- card body-->
          </div>
          <!-- card -->
        </div>
        <!-- col1 -->

        <!-- col2 interna -->
        <div class="col-6 col-sm-6 col-md-12">
          <div class="card my-4">
            <div class="card-header">Otros</div>
            <div class="card-body">
              <p class="card-text">text</p>
            </div>
          </div>
          <!-- card -->
        </div>
        <!-- col2 -->
      </div>
      <!-- row interno -->

    </div>

    <!-- columna 2 externa -->
    <main role="main" class="col-sm-12 col-md-8 col-lg-10">
      Contenido Main
    </main>

  </div>
</div>

4
  • 1
    Bien completa la respuesta, gracias colega!
    – harifo
    el 22 oct. 2019 a las 18:30
  • Muchas gracias y muy buena respuesta Jheyman Mejia... muy util
    – RazerJs
    el 22 oct. 2019 a las 20:41
  • ahora tengo mas claro como funciona el sistema de gillas...
    – RazerJs
    el 22 oct. 2019 a las 20:50
  • Me alegra que les haya servido! Un saludo! el 22 oct. 2019 a las 23:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.