右侧的空白区域-Bootstrap 4

时间:2018-12-01 22:33:53

标签: html css twitter-bootstrap

我正在Bootstrap 4中创建一个网站,但是在创建一个部分时,我最后得到的是右边令人讨厌的空白,导致不必要的水平滚动。

曾与Inspector玩了很长时间,但无法弄清楚问题出在哪里。

完整的代码以及相关的部分: https://jsfiddle.net/dusset/aq9Laaew/284067/

      <div class="row text-center text-light">
    <div id="section-one" class="col mx-auto p-3 mb-5" style="max-width:720px;">
      <h3 class="section-name text-white-50" data-aos="fade-in" data-aos-duration="250" data-aos-delay="250" data-aos-anchor="#section-one">O produkte</h3>
      <h2 data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Preskúmajte nepreskúmané</h2>
      <p class="font-weight-bold mt-5 larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Birthday Capsule je najoriginálnejší a najosobnejší narodeninový darček, aký môžte dať osobe, na ktorej Vám záleží.</p>
      <p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Či je to babka, kamarátka alebo priateľ, život každého z nás má i nepreskúmanú stránku. Teda, donedávna nepreskúmanú…</p>
      <p class="larger" data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Aký vek by mal na Marse? Koľkokrát sa už nadýchla? Čo iné je na dátume jeho narodenia výnimočné? To, i omnoho viac sme preskúmali, a dali do knižky, aby ste to mohli podarovať.</p>
    </div>
  </div>

任何帮助删除它的方法,将不胜感激!

2 个答案:

答案 0 :(得分:1)

您的margin-left: -15px类具有margin-right: -15px.row { margin:0px; } 。这是造成您问题的原因。

将其添加到CSS并得到修复:

id

这是更新的JSFiddle


如果您不想覆盖所有行类,请在下面的行中添加<div id="something" class="row text-center text-light"> ... </div> 并为此单独添加CSS样式。

#something {
   margin:0px;
}

和CSS:

npm i rimraf -D

答案 1 :(得分:0)

将“ no-gutters”类与令人讨厌的“ row”一起使用。参见:https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters