Question

在响应性方面我遇到了bootstrap navbar的问题。我在导航栏上使用了data-spy="affix"以确保它在向下滚动时保持固定在顶部并且完美地工作。然而问题是当我将窗口调整为移动维度时。当我调整到移动维度时，导航栏的右侧部分将显示为超出范围。意思是我无法看到内容，因为我的导航栏对于屏幕而言太宽。但是，当我向下滚动并affix效果接管时，我的导航栏会缩放到移动屏幕，屏幕外的内容将完美地与移动屏幕对齐，整个导航栏都会响应。

以下是导航栏的HTML代码：

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0">
        <div class="navbar-header">
            <div class="navbar-brand">
              <a href="#">Title</a>
            </div>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Page1</a></li>
                <li><a href="#">Page2</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-shopping-cart badge">5</span></a></li>
            </ul>
        </div>
    </nav>

这是我的相关CSS代码：

body {
    font-size:large;
}

.glyphicon{
    font-size: 95%;
}
.affix {
    top:0px;
    width:100%;
    z-index:99999;
}
.affix + .container-fluid {
    padding-top: 6.801%;
}
.navbar-header{
    margin-left: 5% !important;
}
.navbar{
    width:100% !important;
    background-image:none;
    background-color:black;
}
.navbar div a{
    line-height:80px;
}

还创建了JSFiddle。

Answer 1

我已经在jsfiddle中更新了你的代码。你现在可以检查一下，如果你没有把它添加到你的导航栏标题的引导按钮，我有一个css代码给你

@media (max-width:767px){
 .navbar div a {
    line-height: 20px;
}
.affix-top .collapse {
    display:block !important;
}
 
  
}

Bootstrap响应式导航栏

1 个答案: