如何在bootstrap nav中制作span有宽度：0px？

Question

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

    <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？为什么会这样？如何使导航栏中的跨度没有宽度？

当我检查chrome中的span时，我在计算样式中看到的是什么

Answer 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;   
}

<强>更新

问题（问题尚不清楚）是通过聊天/评论和解决方案实现的其他内容：

<强> CSS：

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

<强> JS：

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

DEMO.

Answer 2

您可能希望在css中尝试更具体的特性：

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

或者不那么受欢迎：

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

Answer 3

你需要这样做：

span.no-width {
    width:0;
}

另外，它会调用一个名为no-width的div，它不存在