Question

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

这是我构造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元素？如果正确编写了引导程序元素，我应该如何进行填充，以便能够满足设计要求？非常感谢您的宝贵时间！

Answer 1

在每个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％放入容器中，它也会删除“ 视觉填充”。

Answer 2

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

您应该尝试做：

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

Answer 3

添加下面的类，希望它对您有用。

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

Bootstrap 4列和行产生不必要的填充

3 个答案: