Bootstrap使ul具有边距

Question

Bootstrap使ul具有边距

cssbootstrap-4marginpadding

4

我想知道为什么Bootstrap会给我的ul添加“margin”。

没有使用Bootstrap时： Default

使用Bootstrap后： Bootstrap as Import

<!-- 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 希望有人可以帮忙。

- user8040474

2

怎么样来点代码？ - Jonathan Chaplin

这看起来像是一个标记问题。确保您有容器>行>列，并且它们是直接下降的，但如果没有查看代码就无法确定。 - Joseph Marikle

你是对的，谢谢。我只是忘记添加一个行div。谢谢！ - user8040474

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lexiexiexi · Accepted Answer

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

不确定其背后的原因，但猜测是浏览器试图为列表添加一些视觉空间。 CSS normalizer将解决一些默认样式问题。Bootstrap已经包含了一个，但它并没有从根本上去掉ul间距，所以只需在bootstrap.css文件底部添加以下代码即可。

ul {
  margin: 0; 
  padding:0
}