带Bootstrap 2的响应式导航栏

时间:2015-01-13 16:48:49

标签: html css twitter-bootstrap-2

我需要在Bootstrap 2中进行响应式导航,我在实现这个方面遇到了一些困难......

这就是设计在计算机屏幕和小屏幕或移动设备上的外观,我希望它能够在"排序"下拉列表,就像类别一样,但是包含项目"所有","新","热门","未读"和"晋升"

enter image description here

我还想知道是否可以使用div来完成,而不使用" navbar"类

快速举例:

HTML:

<div class="sort">
    <div class="inline all"v>All</div>
    <div class="inline new">New</div>
    <div class="inline popular">Popular</div>
    <div class="inline unread">Unread</div>
    <div class="inline promoted">Promoted</div>
</div>

CSS:

.inline {
    display:inline;
}
.new { 
    background-color:blue;
    color:white;
    margin-left:10px;
    margin-right:10px;
}
.unread {
    margin-left: 10px;
    margin-right: 10px;
}

0 个答案:

没有答案