我正在尝试制作 bootstrap 导航栏，在较小的设备上，我在登录导航栏上获得水平滚动
您可以通过运行代码段查看问题，然后点击整页，然后调整大小 浏览器窗口。
此外，当我点击移动设备上的登录时，我希望内容完全显示，而不是给我一个垂直滚动。
我也在使用overflow-x: hidden;，但滚动条仍在那里。我知道使用overflow-x: hidden;只会隐藏滚动条，但我仍然能够水平滚动，我不想在移动设备上进行滚动。
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.container-fluid,
.no-padding {
padding: 0;
}
.navbar {
background: #fff;
border: #058A9B;
border-radius: 0;
}
.navbar-default {
margin-bottom: 0;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 2px;
width: 20vw;
padding: 10px 0;
background: #fff;
}
@media (min-width: 768px) and (min-width: 640px) and (min-width: 480px) and (min-width: 320px) {
.navbar-nav>li>.dropdown-menu {
width: 300px;
}
}
.dropdown-menu .form-control {
background-color: #fff;
color: black;
}
.glyphicon {
color: darkgrey;
}
.or-social {
margin-top: 10px;
text-align: center;
color: white;
}
.sign-in-btn,
.social-btn {
width: 100%;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-header>a {
color: #777;
font-size: 18px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: #fff;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Number</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown">Login <span class="caret"></span></a>
<ul class="dropdown-menu">
<form method="post" action="">
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<div class="form-group has-feedback">
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
<input type="email" class="form-control" name="email" placeholder="Email Address">
</div>
</li>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<div class="form-group has-feedback">
<i class="glyphicon glyphicon-lock form-control-feedback"></i>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</li>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<button type="submit" class="btn btn-success sign-in-btn">
<i class="fa fa-sign-in" aria-hidden="true"></i> Sign In
</button>
<a class="pull-right" href="#">forgot password?</a>
</li>
</div>
</form>
<div class="col-md-12 col-sm-12 col-xs-12 or-social">
<li>
<p>or sign in with</p>
</li>
</div>
<li style="margin-top: 15px">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" name="button" class="btn btn-primary social-btn"><span class="fa fa-facebook"></span> Facebook</button>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" name="button" class="btn btn-danger social-btn"><span class="fa fa-google"></span> Google</button>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!--- Static Navbar End -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
答案 0 :(得分：1)
仅为较小的设备添加了媒体查询，例如max-height:768px
@media only screen and (max-width: 768px) {
#navbar {
max-height: fit-content;
}
/* And we even need to overwrite the overflow property*/
.navbar-collapse.in {
overflow-y: hidden;
overflow-x: hidden;
}
}
这样，您的内容将完全可见且不可滚动。你甚至不需要overflow:hidden。
随意删除background-color。
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.container-fluid,
.no-padding {
padding: 0;
}
.navbar {
background: #fff;
border: #058A9B;
border-radius: 0;
}
.navbar-default {
margin-bottom: 0;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 2px;
width: 20vw;
padding: 10px 0;
background: #fff;
}
.dropdown-menu .form-control {
background-color: #fff;
color: black;
}
.glyphicon {
color: darkgrey;
}
.or-social {
margin-top: 10px;
text-align: center;
color: white;
}
.sign-in-btn,
.social-btn {
width: 100%;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-header>a {
color: #777;
font-size: 18px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
background-color: #fff;
}
@media only screen and (max-width: 768px) {
#navbar {
background-color: lightblue;
max-height: fit-content;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<!-- Static navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Number</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<a href="#" data-toggle="dropdown">Login <span class="caret"></span></a>
<ul class="dropdown-menu">
<form method="post" action="">
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<div class="form-group has-feedback">
<i class="glyphicon glyphicon-envelope form-control-feedback"></i>
<input type="email" class="form-control" name="email" placeholder="Email Address">
</div>
</li>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<div class="form-group has-feedback">
<i class="glyphicon glyphicon-lock form-control-feedback"></i>
<input type="password" class="form-control" name="password" placeholder="Password">
</div>
</li>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<li>
<button type="submit" class="btn btn-success sign-in-btn">
<i class="fa fa-sign-in" aria-hidden="true"></i> Sign In
</button>
<a class="pull-right" href="#">forgot password?</a>
</li>
</div>
</form>
<div class="col-md-12 col-sm-12 col-xs-12 or-social">
<li>
<p>or sign in with</p>
</li>
</div>
<li style="margin-top: 15px">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" name="button" class="btn btn-primary social-btn"><span class="fa fa-facebook"></span> Facebook</button>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<button type="button" name="button" class="btn btn-danger social-btn"><span class="fa fa-google"></span> Google</button>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!--- Static Navbar End -->
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>