Bootstrap 4 columns and rows producing unwanted padding [duplicate]

问题

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:

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 -->

But this is resulting in this:

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!

回答1:

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

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>

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

回答2:

Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."

You should try to do :

<div class="row no-gutters">
    <div class="col-6">
       <img ... />
    </div>
    <div class="col-6">
       <img ... />
    </div>
</div>

回答3:

Add below class hope it works for you.

.margin0-padding0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
}

来源：https://stackoverflow.com/questions/54363146/bootstrap-4-columns-and-rows-producing-unwanted-padding

标签

html

css

bootstrap-4