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

您是否尝试将其放入'nav-header'中？

<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>
           ...

修复了响应式Bootstrap中边栏导航中的垂直徽标

1 个答案: