Bootstrap "col" configuration with no number at xl-CodePudding

all,

I'm doing a bootstrap-made project where I have one row with five children:

<div >
   <div >
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
   </div>
</div>

(The content itself is a Bootstrap card, if that is of any concern)

So I've got some of the flexible layout classes going on on those col divs:

      <div >[content]</div>

And that's fine at the smaller widths, it leads to wrapping, and I'm OK with that. But there comes a point where the screen is wide enough such that there's room for all five pieces of content. I just would like at that size for the content divs to act like they were just , so that they will share the one row and evenly divide up the space.

I tried col-xl-auto and that doesn't seem to cut it: the cards just reduce to their "natural" sizes and they don't fill the row nicely.

I thought I understood the concept of bootstrap's row-cols-* functionality, but I am getting awful results. I tried putting on the row and on each content div col-xl-1 and that didn't work: the row just limits itself to the space that was previously occupied by the first five of 12 columns, and then the cards squeeze into there. I had expected that row-cols-* took the same horizontal space that had before been divided into 12 columns and instead divided the same space into * columns, rather than just limiting the width of the row. Am I misunderstanding that?

Anyway, does anyone have an idea about what I'm trying to accomplish, that col-xl-something will give me the standard col action?

CodePudding user response：

A few lessons

I tried putting on the row and on each content div col-xl-1 and that didn't work

Column classes are higher in hierarchy than row classes. So what you are doing here is forcing each column to be 1/12 (8.33%) in width with .col-xl-1, which overrides the .row-cols-xl-5 column width of 20%.

Note that Bootstrap doesn't actually make each row 12 columns, it utilizes width % and flex- properties (-grow, -shrink, -basis) to size the columns. This is different than using CSS Grid where one would say a div should span multiple columns.

<div >[content]</div>

The class .col serves no purpose here after you also use .col-12. The class .col sets flex-grow: 1; on the column, which will be overridden by .col-12 which sets flex-grow: 0; but adds width: 100%.

I tried col-xl-auto and that doesn't seem to cut it

Using -auto will give the columns their natural (minimum) width. It sets flex-grow: 0; and width: auto; on the columns.

Solution

does anyone have an idea about what I'm trying to accomplish, that col-xl-something will give me the standard col action?

Remember how column classes will override row classes? Well let's put that to use.

This will generate:

by default full width columns: .row-cols-1;
at md breakpoint two equal columns: .row-cols-md-2;
at lg breakpoint three equal columns: .row-cols-lg-3;
at xl breakpoint: .col-xl columns will have flex-grow: 1;.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div >
   <div >
     <div >[content]</div>
     <div >[content]</div>
     <div >[content]</div>
     <div >[content]</div>
     <div >[content]</div>
   </div>
</div>

Lastly, you did not specify in your question what your ideal layout would be, nor did you add the cards. Therefore I cannot offer you any other solutions, but ask yourself this: do I need to specify the number of columns for my layout? And at what viewport width does the layout not behave how I want it to? Only then, add column numbers.

Because if you simply want a free-flowing card layout, just use the layout you started your question with, perhaps only with stacked columns by default but start wrapping at md breakpoint:

<div >
   <div >
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
      <div >[content]</div>
   </div>
</div>