Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to wrap columns in the Bootstrap grid layout, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

1. Common problems of line wrapping in grid layout

In the last few sections, we have more or less introduced some relevant knowledge about grid line wrapping, and there are also relevant demonstrations in the code. This lesson will explain the line wrapping in detail again, because if you are not proficient in the relevant knowledge of line wrapping, it is easy to cause a great deviation in web page typesetting or inexplicable problems. In addition, in the past, most of them coincided with full rows, such as 4 columns divided into 2 rows, but those with problems are often not full rows, such as 3 columns or 5 columns divided into two rows, then it is easy to have problems with how the last row is displayed without paying attention.

Common questions about grid line wrapping:

Where there should be a new line, there is no change.

Change the line where you shouldn't change the line.

The last line of automatic line wrapping is a mess.

2.2.1.Row-cols-* usage of columns

The row we used earlier is a simple one. In fact, for row, you can also use the row-cols-* class to quickly set the number of columns that best render content and layout. The normal .col-* class applies to individual columns (for example, .col-md-4), while the row-cols-* class is set on the parent .row as a shortcut.

The asterisk of .row-cols-* can write a number, and the number represents the number of columns to be displayed in a row, not the width, which should not be confused with the ordinary .col-*. You can also use .row-cols-auto adaptive widths, but in this way, the layout is likely to be out of your control.

Here is the code to demonstrate the following:

What is the grid row demonstration Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap?

The display results are as follows

Try changing 3 in row-cols-3 to 2, 4, 5, 6, etc. Have you noticed that there is a little surprise? we can't display 5 columns per row by setting the width of the column col-, but we can do it by setting row-cols-5.

2.2. Row-cols-*-* usage

Like setting the width of the column, setting the number of rows also supports responsive design. The following code shows its specific use. Note that there is no such class as row-cols-xs-1. Please use row-cols-1, that is, the smallest screen is not written by default.

What is the grid row demonstration Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap? What is Bootstrap?

Responsive effect animation

2.3 Ultra wide Line feeds

When each cell in a row has a width value set, it will automatically wrap when the width of the remaining cell in a row is not enough for the next cell. I have explained and demonstrated this part in detail in the fourth section of the Bootstrap web layout grid system. I will not elaborate on it here. If there is something I do not understand, please refer to section 4.2.4.

2.4 forced line feeds

You usually add multiple row line breaks without changing the width of each column in Bootstrap, but sometimes you need to force line breaks after a column in a row. You can use a tip: add a div with a width of 100% and a height of 0 to force line breaks where you need to wrap lines later.

.col-6. Col-sm-3.col-6. Col-sm-3

Originally displayed in one line, displayed in two lines.

Thank you for reading this article carefully. I hope the article "how to wrap columns in Bootstrap Grid layout" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.