Question

场合

使用Boostrap v4，当我向[224,224,3]添加背景颜色时，该元素似乎与其列中的所有其他元素不对齐。我申请了div但它并没有停留在其容器内。从来没有遇到过这个问题。

目标

将元素保留在其列

中

HTML

box-sizing: border-box

CSS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">

<section class="container padding-bottom--md">
    <div class="row">
        <div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
            <h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
            <p class="txt--white no-margin-bottom">A load of pish posh text</p>
        </div>
        <div class="col-md-6 bg--orange text-md-center padding-bottom--md padding-top--md">
            <h5 class="text-uppercase txt--white">Lorem Ipsum</h5>
            <p class="txt--white no-margin-bottom">A load of pish posh text</p>
        </div>
    </div>                          
</section>

Answer 1

我找到了解决问题的方法。添加第二个内部div以保留内容而不进行任何填充。

<强> HTML

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 bg--white text-md-center padding-top--md">
                <div class="bg--orange padding-info-inner-md">
                    <h5 class="text-uppercase txt--white">Resource centre</h5>
                    <p class="txt--white no-margin-bottom">Got a question? Have you checked our knowledge bank and help guides?</p>
                </div>
            </div>
        </div>                  
    </div>
</section>

<强> CSS

.bg--orange { background: #e64b3c; }
.bg--white { background: #FFFFFF }
.padding-info-inner-md { padding: 2rem; }

Bootstrap网格，填充问题导致后台溢出

1 个答案: