This is the sixth day of my participation in Gwen Challenge

“Bootstrap5 zero foundation to master” my old liu original, strive to update a section every day. The chapter will be rearranged, and we will see if we can modify the previous one after the challenge. I write a long course for the first time, planning is not very good. Now I’m going to write it in chapters.

6.1 Common problems of line breaks in grid layout

In the sections that have more or less some relevant knowledge about the grid line is introduced, in the code also has related demonstration, this lesson will separate out and tell me the detail again on line, because if not skills in exchange the relevant knowledge, it is easy to cause web typography appear large deviation, or a puzzling problem. In addition, most of the previous time just conforms to the full row, for example, 4 columns divided into 2 rows, but the problem is often not satisfied with the row, for example, 3 or 5 columns divided into two rows, then how to display the last row is easy to fail to pay attention to the problem.

Common problems with grid wrap:

  1. Do not wrap lines where they should be
  2. Line breaks where they shouldn’t be
  3. The last line of the wrap line is disorganized

6.2. Column newlines

6.2.1 .row-cols-*usage

The previous row was a simple

. In fact, you can go one step further and use the row-cols-* class to quickly set the number of columns that best represent the content and layout. The plain.col-* class is applied to individual columns (for example.col-mD-4), while the row-cols-* class is set as a shortcut on the parent.row.

The.row-cols-* asterisk can be written as a number, which represents the number of columns to display in a row, not the width, and is not to be confused with the normal. Col -*. You can also use.row-cols-auto adaptive widths, but the layout is likely to be out of your control.

Again, use code to demonstrate the following:

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > grid ranks demo < / title > < / head > < body > < div class = "container" > < div Class ="row row-cols-3"> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

The following output is displayed:

Try changing the 3 in row-cols-3 to 2, 4, 5, 6, and so on. As a surprise, by setting the column width col- we can’t average 5 columns in a row, but by setting row-cols-5 we can.

6.2.2 .row-cols-*-*usage

As well as setting the width of the column, setting the number of rows supports responsive design. The code below shows how this can be used. Note that there is no such class as row-cols-XS-1, use row-cols-1.

<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link Href = "bootstrap5 / bootstrap. Min. CSS" rel = "stylesheet" > < title > grid ranks demo < / title > < / head > < body > < div class = "container" > < div Class ="row row-cols-md-1 row-cols-md-2 row-cols-lg-3"> <div class="col"> </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> <div class="col"> what is Bootstrap? </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code

Responsive effects animation

6.2.3 Super wide Line feed

When each cell in a row is set to a width value, it is wrapped when there is not enough space for the next cell in the row. I have explained and demonstrated this part in detail in section iv Bootstrap Web page Layout Grid System. I will not go into details here. Please refer to section 4.2.4 if you have any questions.

6.2.4 Forcing Line Breaks

When Bootstrap does not change the width of each column, it is common to add multiple rows to force a line break. However, when you need to force a line break after a column in a row, you can use a trick: Add a div with 100% width and 0 height to force a line break.

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

<! -- force line break -->
<div class="w-100"></div>

<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Copy the code

What is displayed on one line is displayed on two lines.

Today’s lesson is here, please pay attention to me, timely learn my original “Bootstrap5 zero foundation to master” section 7 Bootstrap page layout grid column sorting and offset.