[英]White space on right side - Bootstrap 4
我正在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>
非常感谢您删除它的任何帮助!
您的.row
类具有margin-left: -15px
和margin-right: -15px
。 这是导致您出现问题的原因。
将此添加到您的CSS中,它是固定的:
.row {
margin:0px;
}
这是更新的JSFiddle
如果您不想覆盖所有行类 ,请在下面的行中添加一个id
,并为此单独添加CSS样式。
<div id="something" class="row text-center text-light">
...
</div>
和CSS:
#something {
margin:0px;
}
将“无檐槽”类与令人讨厌的“行”一起使用。 参见: https : //getbootstrap.com/docs/4.0/layout/grid/#no-gutters
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.