Bootstrap 为 ul 留余量

Question

我想知道为什么 Bootstrap 会在我的 ul 中添加一个 "margin"。

没有：

有：

<!-- HEADER -->
<div class="header">
    <div class="container">

        <ul class="list-group">
            <li class=""><a href="#start">CompanyX.com</a></li>

            <li class="right"><a href="#logout"><i class="fa fa-sign-out"></i></a></li>
            <li class="right"><a href="#money">Hey: Peter G.</a></li>
        </ul>
    </div>
</div>

CSS: https://hastebin.com/uqawiwuyer.css

希望有人能帮助我。

Answer 1

它实际上不是 Bootstrap 的东西，而是默认的浏览器特定样式。每个浏览器都会为特定元素添加默认样式，至少 Chrome、Firefox 和 Sarafi 都会向所有 <ul> 元素添加 40px 的 padding-left。

不确定其背后的原因，但预感浏览器正试图向列表中添加一些视觉效果 space。

A CSS normalizer 将解决一些默认样式。 Bootstrap 已经包含一个，但实际上并没有删除 ul 间距，因此只需在 bootstrap.css 文件底部的底部添加以下代码。

ul {
  margin: 0; 
  padding:0
}

Bootstrap 为 ul 留余量

Bootstrap makes margin to ul

css

margin

padding

bootstrap-4