Soy nuevo en Vue.JS y nuevo en la programación front-end en general. Estaba tratando de configurar una página con una barra lateral fija y una página de contenido, que se muestra debajo de una barra de navegación. Intenté usar esta configuración:
<template> <div class="container-fluid"> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-12">.col-md-12</div> </div> </div> </template>Para colocar el contenido de mi barra lateral en el div .col-md-6, pero se apilan en lugar de estar a un lado.
No aparecerán uno al lado del otro a menos que hagas el segundo div de la clase col-md-6. Si hay más de 12 columnas, no aparecerán en una fila.
No creo que pueda usar col-md-6 y col-md-12 juntos. Debe intentar comprender el sistema de cuadrícula de arranque.
Para una barra lateral, puede intentar usar col-md-3 y col-md-9.
Bootstrap opera en una row que tiene 12 columnas que puede dividir entre los elementos secundarios, por lo que en su caso, donde tiene un div con col-md-6 y col-md-12 , no tendrá suficiente espacio para ambos en uno fila, pero si divide esas 12 columnas por igual, tendrá ambas en la misma fila
<template> <div class="container-fluid"> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </template>Otra cosa, la proporción que tiene cada elemento secundario de las columnas será igual a la cantidad de la fila que ocupan, por lo que en el caso anterior compartirán la misma cantidad, pero es posible que desee que uno sea más grande que el otro. podría asignar 1/3 de las columnas a un contenedor y 2/3 de las columnas al otro. Como en el ejemplo de abajo
<template> <div class="container-fluid"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-8">.col-md-8</div> </div> </div> </template>