html - Bootstrap li 填充 0 不工作

Question

我正在尝试将 padding 设置为 0 px 以获取 li 标签内的超链接，但它不起作用。如果我在 inline 中为那个特定的超链接设置它，那么它工作正常。

HTML

<div class="container">
    <div class="row">
        <div class="col-xs-2">
            <ul class="nav nav-pills nav-stacked ">
                <li class="active"><a href="nokia-phones-1.php">Nokia</a></li>
                <li><a href="samsung-phones-9.php">Samsung</a></li>
                <li><a href="motorola-phones-4.php">Motorola</a></li>
                <li><a href="sony-phones-7.php">Sony</a></li>
            </ul>
        </div>

    <div class="col-xs-10">
        <h2>Most Viewed</h2>
    </div>
    </div>
</div>

CSS

@import url("http://netdna.bootstrapcdn.com/bootswatch/3.1.1/cerulean/bootstrap.min.css");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css");

li a {
padding: 0px;
}

http://jsfiddle.net/TxdAm/

我试过了

ul li {    padding: 0px;}

和

li  {    padding: 0px;}

和

a  {    padding: 0px;}

但还是不行。

对于无序列表中的超链接，如何将padding设置为0px。

Answer 1

您需要覆盖 Bootstrap 类，只需添加此 CSS 规则:

.nav > li > a {
    padding: 10px 0;
}

在 Bootstrap 中，此规则的值为 10px 15px，因此应该可以解决此问题。

希望这对您有所帮助。