问题描述
Image of the dropdown covering the next section
我为Bootstrap 3样式的网站提供了一个移动视图下拉导航菜单。问题是下拉菜单覆盖了屏幕宽度的90％，并且切断了我第一部分的顶部。我希望将下拉宽度限制为比其内容大一小部分。
到目前为止，我设法使导航栏的文字在左侧对齐。那对我有好处。现在，我想减小容器的宽度，以使它不再覆盖我的图像，并且不偏向左侧。
很抱歉，我的代码段无法正常运行，但是图像恰好显示了我所看到的内容。谢谢
*,html {
margin: 0;
padding: 0;
font-size: 10px;
}
body {
width: 100vw;
height: 100vh;
}
nav {
max-width: 100vw !important;
}
nav .container {
margin-right: 1vmax;
margin-left: 15vmax !important;
}
@media only screen and (max-width: 767px) {
#navbar ul {
text-align: end !important;
}
#navbar ul li {
/* width: 4vmax !important; */
}
}
#navbar li a {
font-size: 1.8rem;
}
.navbar-default {
background: white;
border: 0;
font-family: 'Poppins';
}
.nav-logo {
font-size: 2.8rem !important;
letter-spacing: .11vw;
font-family: 'PierSans';
color: rgb(56,56,56);
}
.nav-brand {
font-size: 2.8rem !important;
letter-spacing: .06vw;
color: rgb(56,56);
font-weight: 300;
font-family: 'Roboto',"Helvetica Neue",sans-serif;
}
.btn {
border-radius: 3px;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Google Home</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CRoboto%7CJosefin+Sans:100,300,500" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,800;1,400;1,600;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
</head>
<body>
<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 ml-auto">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="nav-logo">Google</span>
<span class="nav-brand">Home</span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse col-sm-3">
<ul class="nav navbar-nav navbar-right">
<!--"navbar-right 'or left'" moves this component in that direction-->
<li><a href="#showcase">Home</a></li>
<li><a href="#info1">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<section id="showcase">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="showcase-left">
<img src="http://placehold.jp/150x50.png">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="showcase-right">
<h1>Hands-free help from the Google Assistant</h1>
<p>Google Home voice-activated speaker.consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</p>
<a class="btn btn-default btn-md showcase-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-
[enter image description here][1]DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
解决方法
您可以尝试使nav.navbar的背景透明，并将background-color应用于#navbar ul li
这是您更新的代码：
HTML（未更改）：
<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 ml-auto">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="nav-logo">Google</span>
<span class="nav-brand">Home</span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse col-sm-3">
<ul class="nav navbar-nav navbar-right">
<!--"navbar-right 'or left'" moves this component in that direction-->
<li><a href="#showcase">Home</a></li>
<li><a href="#info1">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<section id="showcase">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="showcase-left">
<img src="http://placehold.jp/150x50.png">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="showcase-right">
<h1>Hands-free help from the Google Assistant</h1>
<p>Google Home voice-activated speaker.consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</p>
<a class="btn btn-default btn-md showcase-btn">Read More</a>
</div>
</div>
</div>
</div>
</section>
CSS：
*,html {
margin: 0;
padding: 0;
font-size: 10px;
}
body {
width: 100vw;
height: 100vh;
}
nav {
width: 100%;
/* max-width: 100vw !important; */
}
nav .container {
/* margin-right: 1vmax; */
/* margin-left: 15vmax !important; */
}
@media only screen and (max-width: 767px) {
nav.navbar{
background: transparent;
border: none;
}
#navbar ul {
float: right !important;
text-align: right !important;
}
#navbar ul li {
/* width: 4vmax !important; */
width: 45vw;
background-color: #f8f8f8;
}
.navbar-header{
background-color: #f8f8f8;
}
.navbar-brand{
display: flex;
flex-direction: row;
justify-content: center;
width: 80%;
}
}
#navbar li a {
font-size: 1.8rem;
}
.navbar-default {
background: white;
border: 0;
font-family: 'Poppins';
}
.nav-logo {
font-size: 2.8rem !important;
letter-spacing: .11vw;
font-family: 'PierSans';
color: rgb(56,56,56);
}
.nav-brand {
font-size: 2.8rem !important;
letter-spacing: .06vw;
color: rgb(56,56);
font-weight: 300;
font-family: 'Roboto',"Helvetica Neue",sans-serif;
}
.btn {
border-radius: 3px;
}
CodePen：https://codepen.io/debrajr/pen/MWybvdp
干杯！