时间戳

首页 > 解决方案 > Bootstrap 导航汉堡下拉菜单向左延伸太远

html - Bootstrap 导航汉堡下拉菜单向左延伸太远

问题描述

覆盖下一部分的下拉菜单的图像

我的 Bootstrap 3 样式网站有一个移动视图下拉导航菜单。问题是下拉菜单覆盖了屏幕宽度的 90%，并且切断了我的第一部分的顶部。我希望将下拉宽度限制为比其内容大一点。

到目前为止，我设法让导航 li 在左侧对齐文本。这对我有好处。现在我想减小容器宽度，使其不再覆盖我的图像并在左侧不碍事。

我很抱歉我的代码片段效果不佳，但图像完全显示了我所看到的。谢谢

*,
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, 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,400,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>

在此处输入图像描述

标签： htmltwitter-bootstrap-3

解决方案

您可以尝试使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, 56);
  font-weight: 300;
  font-family: 'Roboto', "Helvetica Neue", sans-serif;
}

.btn {
  border-radius: 3px;
}

代码笔： https ://codepen.io/debrajr/pen/MWybvdp

干杯!

推荐阅读