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 。

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

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

ul {
  margin: 0; 
  padding:0
}