Why do the col divs stack instead of aligning aside?-CodePudding

I'm new to Vue.JS and new to front-end programming more in general. I was trying to set a page with a fixed sidebar and a content page, which is to rendered below a navbar. I tried using this configuration:

<template>
  <div >
    <div >
      <div >.col-md-6</div>
      <div >.col-md-12</div>
    </div>
  </div>
</template>

To place my sidebar content in the .col-md-6 div, but they're being rendered stacked instead of being aside.

Screenshot of app

CodePudding user response：

They will not show up side by side unless you make the second div of class col-md-6. If there are more than 12 columns, they will not appear in one row.

CodePudding user response：

I don't think you can use col-md-6 and col-md-12 together You should try and understand the bootstrap grid system.

For a sidebar, you can try using col-md-3 and col-md-9.

CodePudding user response：

Bootstrap operates on a row having 12 columns that you can divide among the child elements, so in your case where you have one div with a col-md-6 and a col-md-12 you will not have enough room for both on one row, but if you divide those 12 columns equally you will have both on the same row

<template>
  <div >
    <div >
      <div >.col-md-6</div>
      <div >.col-md-6</div>
    </div>
  </div>
</template>

Another thing, the proportion that each row has of the columns will be equal to the amount of the row that they take up so in the case of above they will share the same amount but you may want one to be larger than the other so you could allocate 1/3 of the columns to one container and 2/3 of the columns to the other. As in the example below

<template>
  <div >
    <div >
      <div >.col-md-4</div>
      <div >.col-md-8</div>
    </div>
  </div>
</template>