jquery - Bootstrap navbar 似乎比实际内容长

标签 jquery html css twitter-bootstrap-3 navbar

我是 Bootstrap 的新手。导航栏看起来比我的屏幕尺寸长。它最右边的按钮与窗口的右侧重叠。但是,我无法将网页向右滚动并查看整个导航栏。它曾经看起来不错,但不知怎的,它看起来像这样:

enter image description here

.navbar {
  padding-top: 6px;
  padding-bottom: 4px;
  box-shadow: 0px 1px 5px gray;
  background-color: rgba(244, 139, 139, 0.8);
}
.nav.navbar-nav.navbar-right a {
  margin-right: 2px;
  color: white;
  font-size: 30px;
  font-family: Phenomena-Bold;
}
.navbar-collapse .navbar-nav > li > a:hover {
  color: #3b3c3d;
}
.navbar-collapse .navbar-nav > li > a:active {
  color: #3b3c3d;
}
span.glyphicon-user {
  font-size: 20px;
}
span.glyphicon-shopping-cart {
  font-size: 20px;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: white
  /* change this to any color you want! */
  ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="navbar navbar-light container-fluid navbar-fixed-top" role="navigation">
  <div class="row">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-pills navbar-right">
        <li role="presentation"><a class="page-scroll" href="#">1</a>
        </li>
        <li role="presentation"><a class="page-scroll" href="#">2</a>
        </li>
        <li role="presentation"><a class="page-scroll" href="#">3</a>
        </li>
        <li role="presentation"><a class="page-scroll" href="#">4</a>
        </li>
        <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-user"></span></a>
        </li>
        <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>

最佳答案

            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav nav-pills navbar-right">
                        <li role="presentation"><a class="page-scroll" href="#">1</a></li>
                        <li role="presentation"><a class="page-scroll" href="#">2</a></li>
                        <li role="presentation"><a class="page-scroll" href="#">3</a></li>
                        <li role="presentation"><a class="page-scroll" href="#">4</a></li>
                        <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-user"></span></a></li>
                        <li role="presentation"><a class="page-scroll" href="#"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
        </div>

关于jquery - Bootstrap navbar 似乎比实际内容长,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40866466/

相关文章:

javascript - Mozilla Firefox中复选框上未显示图标

javascript - 在Ajax上加载Google图表-成功

javascript - 仅从特定时刻开始数据滚动速度

javascript - 我应该在哪里存储 JWT 的不记名 token ?

html - 背景加在背景上,周围的内容

javascript - 如何检测浏览器是否支持 MJPEG?

css - 如何清除 ul 的 float

javascript - jQuery将值从下拉列表添加到文本输入

javascript - 无法在通过 javascript 提交的表单上向 servlet 发送参数

css - 如何在 CSS 中使子元素受其父元素的宽度约束?