引导导航堆叠行填充/高度变化？

Posted 2023-03-06

【中文标题】引导导航堆叠行填充/高度变化？

【英文标题】：Bootstrap nav-stacked row padding/height change?

【发布时间】：2014-05-23 09:35:14

【问题描述】：

我正在尝试更改边栏导航堆叠对象的填充或行高。我将发布我想要减少的区域的屏幕截图。任何帮助都是极好的！谢谢。

<div class="col-md-12" id="leftCol">
    <ul class="nav nav-stacked" id="sidebar">                
        <li class="active"><a href="#"><i class="fa fa-home"></i> - Home</a></li>
        <li><a href="#"><i class="fa fa-info-circle"></i> - About Us</a></li>
        <li><a href="#"><i class="fa fa-bar-chart-o"></i> - Analytics</a></li>
        <li><a href="#"><i class="fa fa-square"></i> - News</a></li>
        <li><a href="#"><i class="fa fa-bullhorn"></i> - Marketing</a></li>
        <li><a href="#"><i class="fa fa-lightbulb-o"></i> - Ideas?</a></li>
        <li><a href="#"><i class="fa fa-shield"></i> - TOS</a></li>
    </ul>
</div>

这是问题图片的链接：

!https://drive.google.com/file/d/0B1kb6y5-dmmFdXVSa3hyU2NLbmM/edit?usp=sharing

【问题讨论】：

减少 元素的内边距。

【参考方案1】：

如下覆盖当前填充。

.nav>li>a 
    padding: 1px; //whatever values you want...

默认填充来自以下规则...

.nav>li>a 
    position: relative;
    display: block;
    padding: 10px 15px;

【讨论】：

这完全符合我对侧边栏的要求，但它破坏了顶部导航。我想我需要一种方法来覆盖这些设置，仅用于我的左侧边栏。有什么想法吗？

而不是 .nav>li>a 尝试 #sidebar>li>a 那么这只会针对您的侧边栏而不是顶部导航。

有效！惊人的！谢谢。