如何在WordPress Visual Composer中制作两行无间隙且区块拉伸的四个盒子

Hey there! I’ve tackled this exact setup dozens of times—let’s break it down step by step to get you the result you want:

1. Start with a Full-Stretched Parent Row #

First, add a Row module to your page. When editing the row:

• Jump to the Design Options tab (or "Row Settings" depending on your WPBakery version).
• Set Stretch Row and Content to Stretch row and content (no paddings)—this makes the entire block span your site’s full width without default side padding.
• Set Top Padding and Bottom Padding to 0 right here to wipe out default row spacing.
• Optional: Add a custom CSS class like full-stretch-row to this row (and the second one later) for easier targeted styling if needed.

2. Build the First Row of 4 Boxes #

Inside the first stretched row:

• Add 4 Columns (each column should take 3 grid units—since WPBakery uses a 12-column grid, 12/4 = 3 columns per box, which fits perfectly).
• For each column, add your box content (use a Text Block, Custom HTML, or even a Button module—whatever fits your design).
• Style each box (add background color, internal padding, borders, etc.) via the module’s settings. Crucially, set Margin Bottom on each box module to 0 so there’s no extra space below the first row’s boxes.

3. Add the Second Row & Eliminate Inter-Row Gaps #

Now add your second Row module directly below the first one:

• Repeat the stretch settings from step 1: set Stretch Row and Content to the same option, and set Top Padding to 0—this is the key step to remove the gap between rows.
• Again, add 4 columns (3 units each) and your box content, setting Margin Top on each box module to 0 to avoid any internal spacing between the rows.

4. Fix Persistent Gaps with Custom CSS (If Needed) #

If a tiny gap still lingers (sometimes theme styles add default margins behind the scenes), add this custom CSS to your site’s Appearance > Customize > Additional CSS (or WPBakery’s built-in custom CSS field):

.full-stretch-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.full-stretch-row .wpb_column {
    margin-bottom: 0 !important;
}

Just make sure both rows have the full-stretch-row custom class we added earlier.

That’s all! Your two rows of four boxes should now be fully stretched with zero gaps between the rows, exactly as you wanted.

内容的提问来源于stack exchange，提问作者Samiran