twitter bootstrap nav 堆叠列表自定义答案

【问题标题】：twitter bootstrap nav stacked list customizationtwitter bootstrap nav 堆叠列表自定义
【发布时间】：2013-05-01 13:01:23
【问题描述】：

您好，前端开发人员和其他对此主题感兴趣的人。我对引导组件之一有疑问，即 ul 使用 nav nav-tabs nav-stacked 类进行列表自定义。

经典的变种是这个

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala</a></li>
    <li><a href="baba">baba</a></li>
</ul>

看起来像这样：

但是如果我想在其中的每个堆叠选项卡的右侧添加某种链接/按钮怎么办？如果我在 li 标签中省略了 a 标签，那么炫酷的边框、who-tab-hover 效果就消失了。那么有什么方法可以做到这一点，所以我可以继续使用类的引导链 nav nav-tabs nav-stacked 并能够在选项卡上放置第二个网址（在某种程度上，整个选项卡仍然链接到指定的href，但是正确放置了五线谱，例如a 类btn？

我试过这段代码：

<ul class="nav nav-tabs nav-stacked">
    <li>
        <ul class="inline">
            <li><a href="lala">lala</a></li>
            <li class="pull-right"><a href="baba" class="btn btn-info">bbb</a></li>
        </ul>
    </li>
    <li><a href="baba">baba</a></li>
</ul>

它不起作用，我的意思是，是的，我确实有一个超链接，我确实有一个按钮，拉到右边，但我没有边框和所有活动区域。

如果有不清楚的地方——我会说得更清楚。此致，谢尔盖

【问题讨论】：

标签： twitter-bootstrap html-lists frontend

【解决方案1】：

标签是使用锚点创建的，因此您可以将右对齐按钮放在锚点标签中：

<ul class="nav nav-tabs nav-stacked">
    <li><a href="lala">lala <button class="pull-right">bbb</button></a></li>
    <li><a href="baba">baba</a></li>
</ul>

演示 - http://bootply.com/60855

【讨论】：