Bootstrap 4列和行产生不必要的填充 [英] Bootstrap 4 columns and rows producing unwanted padding

问题描述

我正在尝试使用引导程序创建列和行来放置我的图像，但是在图像周围添加了过多的填充，这使我的图像看起来不像设计:

I am trying to use bootstrap to create columns and rows to place my images however too much padding is being added around the images which is preventing my images from looking like the design:

这是我组织HTML的方式:

This is how I structured my HTML:

<!-- header -->

<header>
    <div class="container">
        <div class="row">
            <div class="col-md-5">
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row1['url'] !!}" alt="{!! $bg_image_col1_row1['alt'] !!}" />
                </div>
                <div class="col-md-12">
                    <img src="{!! $bg_image_col1_row2['url'] !!}" alt="{!! $bg_image_col1_row2['alt'] !!}" />
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col1['url'] !!}" alt="{!! $bg_image_co21_row1_col1['alt'] !!}" />
                    </div>
                    <div class="col-md-6">
                        <img src="{!! $bg_image_co21_row1_col2['url'] !!}" alt="{!! $bg_image_co21_row1_col2['alt'] !!}" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="container">
                            <h1>@php(get_field('front-page__title'))</h1>
                            <div>@php(get_field('front-page__slogan'))</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-md-9">
                            <div class="container">
                                <div class="zeo-cases-button">
                                    <a href="@php(get_field('front-page__button--url'))" class="button">@php(get_field('front-page__button--text'))</a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="container">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- /header -->

但这会导致以下结果:

我的问题.我是否正确编写了bootstrap元素?如果正确编写了引导程序元素，我应该如何进行填充，以便能够满足设计要求?非常感谢您的宝贵时间！

My question. Did I write the bootstrap elements correctly? How should I go about the padding in case the bootstrap elements are written correctly so that I can match the requirements of the design? Thanks a lot for your time!

推荐答案

向每个div class="row"添加类no-gutters，以删除col-*元素之间的空格

Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements

有关装订线的信息，请参见Bootstrap 文档.

See the Bootstrap documentation about gutters.

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ddd" class="col-sm-3">d</div>
</div>

这里有一个有效的 jsfiddle ，它一次也删除了"视觉填充"图片无法100％放入容器中.

Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.

这篇关于Bootstrap 4列和行产生不必要的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！