css - 修复了响应式 Bootstrap 侧边栏导航中的垂直 Logo

标签 css image twitter-bootstrap css-position fluid-layout

有没有一种方法可以使用垂直 Logo 获得与代码中无序代码相同的结果: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-->

最佳答案

你试过像这样把它放在'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>
           ...

关于css - 修复了响应式 Bootstrap 侧边栏导航中的垂直 Logo ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16265213/

相关文章:

css - Twitter Bootstrap 按钮的水平和垂直分离

javascript - 单击一次按钮即可触发按钮

html - 邮箱显示在 "random"处

html - 停止在标签末尾 float

javascript - 导入 Bootstrap 样式表时图像消失

r - 我们如何在 R 中的给定坐标处绘制图像?

使用 ImportXml 在 Google Sheets 中抓取图像

javascript - 使用jQuery为同一类的不同div中的特定元素添加悬停效果

html - 如何让我的图像覆盖背景 html?

javascript - 如何为多个元素调用javascript函数