样式引导选项卡导航答案

【问题标题】：Styling Bootstrap tabbable nav样式引导选项卡导航
【发布时间】：2014-08-06 01:59:25
【问题描述】：

我想要 Bootstrap 可选项卡导航的功能，但我想为每个选项卡设置背景图像和下方的文本。事实上，我真正想要的只是将我的 Photoshop 图像放在每个选项卡中，并将活动状态设置为我选择的图像。

我很难做到这一点。是否需要大量的定制工作才能让这个组件与它一起工作？

我以为我可以尝试一些 CSS，但它没有给我想要的正确格式：

ul.nav.nav-tabs li {
    display:inline-block;
    background:url(../images/skypeIcon.png) no-repeat left center;
    background-size:20px auto;
    font-size:15px;
    padding:2px 0 2px 28px
}

顺便说一句，我使用的是 Bootstrap 2.3，所以我不能使用 Bootstrap 3 导航栏生成器。

【问题讨论】：

标签： javascript html css twitter-bootstrap twitter-bootstrap-2

【解决方案1】：

我可以在我的 a 标签中使用 div 标签，并在其中放置我想要的任何内容。

<ul class="nav nav-tabs">

            <li class="active">

                <a href="#tab1" data-toggle="tab">

                    <div>

                        <img src="<%=context%>/images/defaultAvatar.png"/>

                        <br/>

                        Computer

                    </div>

                </a>

            </li></ul>

【讨论】：