css - 修复了响应式 Bootsrap 侧边栏导航中的垂直徽标

Question

有没有一种方法可以使用垂直徽标获得与使用无序代码实现相同的结果：http: //jsfiddle.net/ukMqq/94/

我删除了无序列表并插入了图像，但它不起作用。该图像仅以移动屏幕大小显示在顶部。

CSS

body {
    padding-bottom: 40px;
    padding-top: 60px;
}

.sidebar-nav {
    padding: 9px 0;
}

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
    z-index:-1;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

 /* for demo purposes (fixed top navbar placement in the fiddle. Ok to remove */

@media (max-width: 767px) {
    body {
        padding-top: 0;
    }
}

@media (max-width: 979px) {
    body {
        padding-top: 0;
    }
}

HTML


     <div class="span3">
       <div class="well sidebar-nav sidebar-nav-fixed">
          <img src="images/image.png">
       </div><!--/.well -->
     </div><!--/span-->

Answer 1

您是否尝试将它放在像这样的“导航标题”中？

<div class="well sidebar-nav sidebar-nav-fixed">
         <ul class="nav nav-list">
           <li class="nav-header"><img src="images/image.png"></li>
           <li class="active"><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           ...