css - Bootstrap 为 ul 留余量

Question

我想知道为什么 Bootstrap 会为我的 ul 添加一个“边距”。

没有:

与:

<!-- 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|元素。

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

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

ul {
  margin: 0; 
  padding:0
}