Bootstrap 4列和行产生不需要的填充[重复]

Posted 2023-03-05

【中文标题】Bootstrap 4列和行产生不需要的填充[重复]

【英文标题】：Bootstrap 4 columns and rows producing unwanted padding [duplicate]

【发布时间】：2019-06-19 03:54:12

【问题描述】：

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

这就是我构建 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'] !!"  />
                </div>
                <div class="col-md-12">
                    <img src="!! $bg_image_col1_row2['url'] !!"  />
                </div>
            </div>
            <div class="col-md-7">
                <div class="row">
                    <div class="col-md-6">
                        <img src="!! $bg_image_co21_row1_col1['url'] !!"  />
                    </div>
                    <div class="col-md-6">
                        <img src="!! $bg_image_co21_row1_col2['url'] !!"  />
                    </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 -->

但这会导致：

我的问题。我是否正确编写了引导元素？如果引导元素编写正确，我应该如何进行填充，以便我可以匹配设计的要求？非常感谢您的宝贵时间！

【问题讨论】：

能否请您提供一个带有 css 的工作片段

【参考方案1】：

添加下面的课程希望它对你有用。

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

【参考方案2】：

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

请参阅引导程序 documentation 了解排水沟。

<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% 放入容器中，它也会删除“visual padding”。

【讨论】：

很好的提示，但我仍然有一些由包含图像的 col 创建的填充：imgur.com/a/hzYL55a

你确定它是真正的填充还是图像对于容器来说太小了？也许尝试为每张图片添加一个width="100%" 以消除视觉填充。

我在 col-md-5 和 col-md-7 下的行中添加了 no-gutters，现在所有图像都完美显示：imgur.com/a/EKcOEPb

啊酷。是的意思是将此类添加到每个<div class="row">。将在答案中更新。

【参考方案3】：

Bootstrap ：“我们预定义的网格类中的列之间的排水沟可以使用 .no-gutters 删除。这会删除 .row 的负边距和所有直接子列的水平填充。”

你应该尝试这样做：

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