【问题标题】: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

【问题讨论】:

  • 减少
  • 元素的内边距。

标签: jquery html css twitter-bootstrap padding


【解决方案1】:

如下覆盖当前填充。

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

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

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

【讨论】:

  • 这完全符合我对侧边栏的要求,但它破坏了顶部导航。我想我需要一种方法来覆盖这些设置,仅用于我的左侧边栏。有什么想法吗?
  • 而不是 .nav&gt;li&gt;a 尝试 #sidebar&gt;li&gt;a 那么这只会针对您的侧边栏而不是顶部导航。
  • 有效!惊人的!谢谢。
猜你喜欢
相关资源
最近更新 更多
热门标签