Solution to leaving gaps between BootStrap grids

The BootStrap grid system can divide our container into several equal parts. If we want to leave a certain amount of space between each part, the first method we may think of is to use margin to separate them and create gaps. Is this really possible?

[See an example]:

CSS style:

.row div {
 
height: 100px;
 
}

HTML code:

<div class="container">
<!-- Row element -->
<div class="row">
<!-- Column element col-xs-value col-sm-value col-md-value col-lg-value -->
<div class="col-lg-5" style="background-color: wheat;"></div>
<div class="col-lg-4" style="background-color: pink;"></div>
<div class="col-lg-3" style="background-color: black;"></div>
</div>
</div>

[The original effect is as follows]:

Now we want to create a gap between these three parts (10px), but we cannot change the original layout. Here we add a margin value:

The css style is changed to:

.row div {			
height: 100px;
margin-right:10px;
 
}

【Effect after adding margin value】:

It was observed that one part was squeezed down, which means that this wave of operations changed the original grid layout.

The reasons are as follows:

When we divide the grid, each part is full and squeezed together. To create a blank space between each column, you add a margin value to them (while the size of each part of the grid itself remains unchanged). Then each part will move, and therefore will definitely exceed the width of the parent container (12 parts).

Through the above operations and explanations, we know that it is not possible to achieve the effect of leaving gaps in the grid system by setting margin value, so how can we solve this problem?

【Solution】：

We can set a padding-right value for each small column, put a box in the small column, and set its width to 100% (the same as the parent)!

CSS style:

.row div {
padding-left: 0px; // remove the default left padding
padding-right: 10px;
height: 100px;
}
 
.hezi {
width: 100%;
background-color: green;
}  

HTML code:

<div class="container">
<!-- Row element -->
<div class="row">
<!-- Part 1 -->
<div class="col-md-5" style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- Part 2 -->
<div class="col-md-4" style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- Part 3 -->
<div class="col-md-3" style="background-color: ;">
<div class="hezi"></div>
</div>
 
</div>
</div>

Note: BootStrap's grid system is very convenient for responsive web development. When using the grid system, you can easily use row and col to control the layout. However, col- -默認會帶15像素的左右padding , which can be quite troublesome. The solution is to add row to the class of the inner tag and set the left and right padding to 0, which will remove the default padding of the table.

The final effect and analysis are as follows:

Summarize

This is the end of this article about the solution to leaving gaps between BootStrap grids. For more information about leaving gaps between BootStrap grids, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!