如何在引导站点中仅使某些导航链接可点击？答案

【问题标题】：How do I make only certain nav links clickable in bootstrap site?如何在引导站点中仅使某些导航链接可点击？
【发布时间】：2014-01-29 21:41:15
【问题描述】：

我在我的网络应用程序中使用了引导程序，如何使当前页面链接在导航栏中不可点击？

我想在每个页面上包含相同的标题，但只允许站点名称可点击，因为它将链接到主页。

因此，在我的示例中，HOME 文本将不可点击，并且不会在悬停时突出显示，但 TEST SITE 将是可点击的并具有悬停效果。

有没有办法格式化来实现这一点？

编辑

   <a class="navbar-brand" href="../Main.aspx">Test Site | Home</a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="About.aspx">About</a></li>

这里是相关的css：

.navbar-brand {
    float: left;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

    .navbar-brand:hover,
    .navbar-brand:focus {
        text-decoration: none;
    }

@media (min-width: 768px) {
    .navbar > .container .navbar-brand {
        margin-left: -15px;
    }
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
    }

        .navbar-toggle .icon-bar + .icon-bar {
            margin-top: 4px;
        }

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}

【问题讨论】：

演示此问题的引导程序或小提琴将很有帮助。我不知道你的代码是什么样的。 bootply.com/new
答案是将每个部分包装在其自己的<a> 标记中，链接到单独的页面，并根据当前页面动态生成这些链接。您能否包含您的一些代码，以便我们了解如何在上下文中完成此操作？
您想在a.navbar-brand 链接之后添加文本span 并对其进行格式化以匹配.navbar-brand 的非悬停外观吗？
@MikeLyons，我添加了 html 代码。我将处理 bootply 示例

标签： html twitter-bootstrap hyperlink navigation

【解决方案1】：

因此，只需将导航栏部分包装在单独的标签中，一个在 <a> 中，一个在 <span> 中，两者都使用 navbar-brand 类

<a class="navbar-brand" href="../Main.aspx">Test Site</a><span class="navbar-brand"> | Home</span>

【讨论】：

我这样做了，但是导航栏品牌的格式在离开课程时消失了
你能在你的问题中添加css吗？
将 css 添加到我的问题中
是的，看起来您可以使用 navbar-brand 类将 Test Site 包装在 <a> 中，然后使用该类将 Home 包装在 span 中。答案已更新。