我正在尝试添加＆＃34; 6 box＆＃34;在我的网站的div /部分。我正在使用WordPress并使用自定义CSS来完成任务。
我想加入所有6盒内容，中间没有空格。我可以通过在下面应用自定义css来做到这一点。
.fusion-content-boxes .fusion-column{
padding: 0px !important;
margin-bottom: 0px !important;
}<div class="fusion-fullwidth fullwidth-box pmhomefull nonhundred-percent-fullwidth non-hundred-percent-height-scrolling" style='background-color: #ffffff;background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;'><div class="fusion-builder-row fusion-row "><div class="fusion-layout-column fusion_builder_column fusion_builder_column_1_1 fusion-one-full fusion-column-first fusion-column-last fusion-blend-mode fusion-spacing-no pmhomefulltwo 1_1" style='margin-top:0px;margin-bottom:20px;'>
<div class="fusion-column-wrapper" style="background-color:#ffffff;padding: 0px 0px 0px 0px;background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;" data-bg-url="">
<div class="fusion-column-content-centered"><div class="fusion-column-content"><div class="fusion-content-boxes content-boxes columns row fusion-columns-3 fusion-columns-total-6 fusion-content-boxes-1 content-boxes-icon-on-top content-left pmcontentbox" data-animationOffset="100%" style="margin-top:40px;margin-bottom:60px;"><style type="text/css" scoped="scoped">.fusion-content-boxes-1 .heading h2{color:#ffffff;}
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading h2,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .heading-link h2,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading h2,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .heading-link h2,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::after,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::before,
.fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:after,
.fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:before,
.fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::after,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::before,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .icon .circle-no,
.fusion-content-boxes-1 .heading .heading-link:hover .content-box-heading {
color: #f05858;
}
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .icon .circle-no {
color: #f05858 !important;
}.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box.link-area-box-hover .fusion-content-box-button {background: #b23735;color: #ffffff;}.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box.link-area-box-hover .fusion-content-box-button .fusion-button-text {color: #ffffff;}
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .icon > span {
background-color: #f05858 !important;
}
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .icon > span {
border-color: #f05858 !important;
}</style><div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-first-in-row"><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#f44336;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i2.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/Logo-Design-Icon.png?resize=60%2C60&ssl=1" width="60" height="60" alt="Custom Logo Design" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Logo Design</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-2 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover "><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#e91e63;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i0.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/envelope.png?resize=60%2C60&ssl=1" width="60" height="60" alt="Brand Identity Design" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Brand Identity Design</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-3 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-last-in-row"><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#9c27b0;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i1.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/bag.png?resize=60%2C60&ssl=1" width="60" height="60" alt="Packaging Design" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Packaging Design</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-clearfix"></div><div class="fusion-column content-box-column content-box-column content-box-column-4 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-first-in-row"><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#673ab7;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i0.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/billboard.png?resize=60%2C60&ssl=1" width="60" height="60" alt="Social Media Cover Design" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Social Media Cover Design</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-5 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover "><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#3044b5;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i2.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/monitor.png?resize=60%2C60&ssl=1" width="60" height="60" alt="Web and App Design" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Web and App Design</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-6 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-last content-box-column-last-in-row"><div class="col content-wrapper-background link-area-link-icon icon-hover-animation-fade" style="background-color:#2196f3;" data-animationOffset="100%"><div class="heading heading-with-icon icon-left"><div class="image"><img src="https://i2.wp.com/www.pmlogos.com/wp-content/uploads/2018/01/edit-tools.png?resize=60%2C60&ssl=1" width="60" height="60" alt="" data-recalc-dims="1" /></div><h2 class="content-box-heading" style="font-size:16px;line-height:21px;">Illustration and Graphics</h2></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p style="font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus neque velit, vel congue arcu porttitor sed. Mauris non congue urna.</p>
</div></div></div><div class="fusion-clearfix"></div><style type="text/css" scoped="scoped">
.fusion-content-boxes-1 .fusion-content-box-hover .heading-link:hover .icon i.circle-yes,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box:hover .heading-link .icon i.circle-yes,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .icon i.circle-yes,
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .icon i.circle-yes {
background-color: #f05858 !important;
border-color: #f05858 !important;
}</style><div class="fusion-clearfix"></div></div></div></div><div class="fusion-clearfix"></div>
</div>
</div></div></div>
现在，这可以加入所有6个盒子，但是整个部分以12-30px的速度从div / section中流出。我尝试了很多来解决这个问题，但不能。
下面是此处问题屏幕截图的链接，并用红色矩形表示问题。
https://i.stack.imgur.com/QEUBr.jpg
请帮忙。
答案 0 :(得分：0)
您可以使用Bootstrap Grid类轻松获取彼此相邻的项目。 https://getbootstrap.com/docs/4.0/layout/grid/该部分不包含Grid项目可能有不同的原因。它可能是边缘或填充，可能会推低它。我建议使用你的浏览器DOM浏览器并将鼠标悬停在有问题的部分，并尝试使用CSS值，例如填充，边距和宽度以及Display属性。我认为首先要尝试在CSS中添加Display：inline-block。
