Web Front-endBootstrap TutorialA brief discussion on how to wrap columns in Bootstrap grid layoutA brief discussion on how to wrap columns in Bootstrap grid layout
This article will take you to learn about the line wrapping problem in bootstrap and see how grid columns wrap. I hope it will be helpful to everyone!
1. Frequently Asked Questions about Line Wrapping in Grid Layout
In the previous sections, we have more or less introduced some related issues about grid line wrapping. Knowledge, there are also relevant demonstrations in the code. This lesson will separate line breaks and explain them in detail, because if you are not proficient in the related knowledge of line breaks, it is easy to cause large deviations in web page layout, or inexplicable problems. . In addition, when I talked about it before, most of the rows fit perfectly, for example, 4 columns divided into 2 rows, but the problem often occurs when the rows are not full, such as 3 columns or 5 columns divided into two rows. If you don’t pay attention to how the last row is displayed, It's easy to go wrong. [Related recommendations: "bootstrap Tutorial"]
Frequently Asked Questions about Grid Line Breaking:
No line wrapping where the line should be broken
Line wrapping where it shouldn’t be
The last line of automatic wrapping is confusing
2. Column wrapping
2.1 .row-cols-*Usage
The row we used earlier is a simple <div class="row">, in fact, for row, you can further use the <code>row-cols-* class to quickly set the number of columns that can best present content and layout. The normal .col-* classes apply to individual columns (e.g. .col-md-4), while the row-cols-* classes are set as shortcuts on the parent .row of. The asterisk of
.row-cols-* can be written with numbers. The numbers represent the number of columns to be displayed in a row, not the width. This should not be confused with the ordinary .col- * is confused. You can also use .row-cols-auto to adapt the width, but in this case, the layout is likely to be out of your control.
Let’s still use code to demonstrate the following:
<!doctype html>
<html>
<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>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>The display results are as follows
Try to put 3 in row-cols-3 Change to 2, 4, 5, 6, etc. to see the effect. Did you find that there is another little surprise? By setting the column width col- we cannot display 5 columns in one row on average, but we can achieve it by setting row-cols-5.
2.2 .row-cols-*-*Usage
Same as setting the width of the column, setting the number of rows also supports responsive design. The following code shows the details Usage, please note that there is no such class as row-cols-xs-1, please use row-cols-1, which means the smallest screen is the smallest screen if it is not written by default.
<!doctype html>
<html>
<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>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>Responsive effect animation
#2.3 Ultra-wide line wrap
When in a row, each cell has a width value set , when the remaining width in a row cannot accommodate the next cell, it will automatically wrap. I have already explained and demonstrated this part in detail in "Section 4 Bootstrap Web Page Layout Grid System", so I won't go into details here. If there is anything you don't understand, please refer to Section 4.2.4.
2.4 Forced line wrapping
In Bootstrap, forcing line wrapping without changing the width of each column is usually done by adding multiple rows, but sometimes it is necessary to force line wrapping after a certain column in a row. At this time, you can use a little trick: where you need to wrap the line, add a div with a width of 100% and a height of 0 to achieve forced line wrapping.
<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> <!-- 此处强制换行 --> <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>
Originally displayed on one line, it is displayed on two lines.
For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !
The above is the detailed content of A brief discussion on how to wrap columns in Bootstrap grid layout. For more information, please follow other related articles on the PHP Chinese website!
Understanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AMBootstrap'sgridsystemiseffectiveduetoits12-columnlayoutandresponsiveclasses,allowingforflexibleandmaintainabledesigns.Toleverageit:1)Userowsandcolumnswithclasseslikecol-md,col-sm,andcol-lgfordifferentscreensizes.2)Simplifylayoutsbyavoidingexcessivene
Bootstrap Grid System: A Comprehensive Guide to Responsive LayoutsMay 13, 2025 pm 04:17 PMBootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid
Bootstrap: Applications and Advantages ExplainedMay 10, 2025 am 12:18 AMBootstrap is a front-end framework for quickly building responsive websites. Its advantages include: 1. Rapid development: leverage predefined styles and components. 2. Consistency: Provide a unified design style. 3. Responsive design: The built-in grid system is adapted to various devices. Bootstrap simplifies the web development process through CSS classes and JavaScript plug-ins.
Bootstrap: Simplifying Responsive Web DevelopmentMay 09, 2025 am 12:13 AMBootstrap simplifies the development process mainly through its raster system, predefined components and JavaScript plug-ins. 1. The grid system allows for flexible layout, 2. Predefined components such as buttons and navigation bars simplify style design, 3. JavaScript plug-in enhances interactive functions and improves development efficiency.
Bootstrap: The Key to Responsive Web DesignMay 08, 2025 am 12:24 AMBootstrap is an open source front-end framework developed by Twitter, providing rich CSS and JavaScript components, simplifying the construction of responsive websites. 1) Its grid system is based on a 12-column layout, and the display of elements under different screen sizes is controlled through class names. 2) The component library includes buttons, navigation bars, etc., which are easy to customize and use. 3) The working principle depends on CSS and JavaScript files, and you need to pay attention to handling dependencies and style conflicts. 4) The usage examples show basic and advanced usage, emphasizing the importance of custom functionality. 5) Common errors include grid system calculation errors and style coverage, which require debugging using developer tools. 6) Performance optimization recommendations only introduce necessary components and customize samples using preprocessors
Bootstrap: A Powerful Framework for Web DesignMay 07, 2025 am 12:05 AMBootstrap is an open source front-end framework developed by the Twitter team to simplify and speed up the web development process. 1.Bootstrap is based on HTML, CSS and JavaScript, and provides a wealth of components and tools for creating modern user interfaces. 2. Its core lies in responsive design, implementing various layouts and styles through predefined classes and components. 3.Bootstrap provides predefined UI components, such as navigation bars, buttons, forms, etc., which are easy to use and adjust. 4. Examples of usage include creating a simple navigation bar and advanced collapsible sidebar. 5. Common errors include version conflicts, CSS overwrites and JavaScript errors, which can be used through the version management tool.
The Power of Bootstrap in React: A Detailed LookMay 06, 2025 am 12:06 AMBootstrap can be integrated in React in two ways: 1) CSS and JavaScript files using Bootstrap; 2) Use the React-Bootstrap library. React-Bootstrap provides encapsulated React components, making using Bootstrap in React more natural and efficient.
Using Bootstrap Components in React: A Step-by-Step TutorialMay 05, 2025 am 12:09 AMThere are two ways to use Bootstrap components in React projects: 1) CSS and JavaScript of the original Bootstrap; 2) Use libraries designed specifically for React such as react-bootstrap or reactstrap. 1) Install Bootstrap through npm and introduce its CSS file in the entry file, and then use the Bootstrap class name in the React component. 2) After installing react-bootstrap or reactstrap, directly use the React components it provides. Use these methods to quickly build a responsive UI, but pay attention to style loading and JavaScript
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Chinese version
Chinese version, very easy to use
WebStorm Mac version
Useful JavaScript development tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver Mac version
Visual web development tools
