如何使引导导航中的跨度具有宽度：0px？答案

【问题标题】：How to make span in bootstrap nav have width: 0px?如何使引导导航中的跨度具有宽度：0px？
【发布时间】：2013-06-28 17:28:51
【问题描述】：

我有一个类似于下面的引导导航

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li>
                        <a href="about"><i class="icon-info"></i><span class="no-width">About</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

对于 .no-width 类，我将 css 设置为

    .no-width {
        width: 0px;
    }

但是，跨度最终具有宽度：auto?为什么会这样？如何让导航栏中的 span 没有宽度？

这是我在 chrome 中检查跨度时看到的计算样式

【问题讨论】：

标签： css twitter-bootstrap navbar

【解决方案1】：

你可以试试

a span.no-width {
    width: 0px !important;
    display:inline !important;   
}

或者这个

div.container ul.nav li a span.no-width {
    width: 0px !important;
    display:inline !important;   
}

更新：

问题（问题不清楚）是从聊天/cmets 中实现的其他问题，解决方案是：

CSS：

ul.nav li a span.no-width { 
    display: inline-block;
    width:0px;
}

JS：

$('span.no-width').animate({ 'display':'inline', 'width':'100px' },2000);

DEMO.

【讨论】：

【解决方案2】：

您可能想在您的 css 中尝试更多的特异性，例如：

.navbar .navbar-inner .container .nav span.no-width { width: 0px; }

或者不那么受欢迎的：

span.no-width { width: 0px !important; }

【讨论】：

我还是有同样的问题。我更新了我的问题以显示我所看到的图片。

【解决方案3】：

你需要做的：

span.no-width {
    width:0;
}

否则它会调用一个不存在的名为 no-width 的 div

【讨论】：

我还是有同样的问题。我更新了我的问题以显示我所看到的图片。