右侧白色- Bootstrap 4

kuarbcqp  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(3)|浏览(187)

我在Bootstrap 4中创建了一个网站,但是在创建一个部分时,我发现右边有烦人白色,导致不必要的水平滚动。
跟督察玩了这么久,也不知道哪里出了问题

此处为相关部分的完整代码: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>

任何帮助删除它是非常感谢!

ef1yzkbh

ef1yzkbh1#

您的.row类具有margin-left: -15pxmargin-right: -15px。这就是问题的原因。
将此问题添加到您的CSS中即可修复:

.row {
  margin:0px;
}

这是更新的JSFiddle

如果您不想覆盖所有行类,请在下面的行中添加一个id,并单独为其添加一个CSS样式。

<div id="something" class="row text-center text-light">
   ...
</div>

还有CSS:

#something {
   margin:0px;
}
fxnxkyjh

fxnxkyjh2#

Use the "no-gutters" class with the offending "row". See: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

wztqucjr

wztqucjr3#

检查您的外部css文件。可能是有一个重叠的内容超出了边缘。

相关问题