正在获取水平滚动条HTML

Question

我正在使用引导程序，但在使用行类时，我得到了水平滚动条

<div class="row" style="margin-top: 10px; margin-right: 10px;">
<div class="card col-md-3" style="max-height:fit-content; background-color: khaki;" >
<div class="d-flex justify-content-center mg">
<img   src="https://image.flaticon.com/icons/png/512/897/897219.png"  style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Artificial intelligence</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: cornflowerblue;" >
<div class="d-flex justify-content-center mg" >
<img   src="https://image.flaticon.com/icons/png/512/888/888991.png"  style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Web development</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: darkcyan;" >
<div class="d-flex justify-content-center mg" >
<img   src="https://image.flaticon.com/icons/png/512/2641/2641044.png"  style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Image processinge</h5>
</div>
</div>
</div>

输出图像输出请帮助

由于堆叠上的代码代码限制，我已经从代码中删除了第四行

Answer 1

因为你没有给我们完整的CSS样式表，所以很难调试，所以我给你一个自己调试的方法。

您可以使用*和outline来查看哪些项目越界，并将它们更正为正确浮动。

* {
outline: 1px solid purple;
}
* > * {
outline: 1px solid blue;
}
* > * > * {
outline: 1px solid red;
}
/* example CSS not part of the answer */
div, span {
padding: 20px;
margin: 4px;
}
h1 {
padding: 10px;
margin-bottom: 12px;
}

<div>
<h1>Testing page</h1>
<div>
<div>Wooow</div>
<span>This</span><span>is</span><span>Doge</span>
<div>
<div>
New level
</div>
</div>
</div>
</div>

Answer 2

我的最佳猜测是您在；行"；在应该使用填充权的位置对边距进行分类。"；行"；类使用了它所放空间的100%，而您使用的是100%+10px，因此是滚动条。

另一种猜测是下面的行看起来更大，这可能是滚动条的原因。