下拉菜单不会在移动视图中滚动

时间：2017-09-29 16:45:29

标签： html css twitter-bootstrap bootstrap-4

我使用Bootstrap 4 beta制作了test page。导航栏有一个下拉菜单。它可以在我的笔记本电脑上全屏运行，但是当我在我的iphone上查看时，下拉列表显示了9个下拉链接中的7个。这是Bootstrap中的错误或我该如何解决？这是我的HTML，我遗漏了一些与之无关的事情。这是screenshot

＆＃13;
＆＃13; 
/* Navbar */

#primary-navbar {
  background: #CDEBED;
  margin-bottom: 0;
}
/* we overwrite the default navbar style from Bootstrap */
nav.navbar {
  background: #CDEBED;
  font-size:18px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 34px;
  white-space: nowrap;
}
/* The toggle unit (there is more stuff in there..) */
.navbar-header .navbar-toggle {
  border: 0;
}
.navbar-header .navbar-toggle span.icon-bar {
  background: #004289;
}
.navbar-header .navbar-toggle:hover span.icon-bar {
  background: #004289;
}
/* The Logo/Start Button on mobile devices */
a.navbar-brand:link,
a.navbar-brand:visited {
  color: #004289;
  text-decoration: none;
   background-color: #fff; 
   border-radius: 50%; padding: .5rem;
}
a.navbar-brand:hover,
a.navbar-brand:focus {
  color: #ff0000;
  text-decoration: none;
}
/* First Level Main nav */
ul.nav {
  /* Menu style */
}
ul.nav li.active {
  background: #004289;
  text-decoration: none;
}
ul.nav li.active a:link,
ul.nav li.active a:visited {
  color: #004289;
  text-decoration: none;
}
ul.nav li a:link,
ul.nav li a:visited {
  color: #004289;
  text-decoration: none;
}
ul.nav li a:hover,
ul.nav li a:focus {
  color: #fff;
}
/* Our resposive dropdown */
ul.dropdown-menu {
  border-radius: 0;
  background: #CDEBED;
  width: 100%;
  margin: 0;
}
ul.dropdown-menu li a:link,
ul.dropdown-menu li a:visited {
  color: #004289;
  padding: 5px 15px;
  text-decoration: none;
}
ul.dropdown-menu li a:hover,
ul.dropdown-menu li a:focus {
  color: #fff;
  text-decoration: none;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #CDEBED;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
    text-decoration: none;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
.dropdown:hover .dropdown-menu {
    display: block;
 }
@media (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
/* Links */

a {
  color: #036;
  text-decoration: none;
}
   

a:hover,
a:focus {
  color: #036;
  text-decoration: none;
}


.navbar-right li {     display: inline-block; }

a {
  color: #036;
  text-decoration: none;

  &:hover {
    color: #fff;
    text-decoration: none;
  }

}

@media (min-width: 992px) {
   .equal{  
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="John Samonas">

<meta name="robots" content="index, follow">

<title>DriftwoodRentals.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top navbar-custom justify-content-center navbar-expand-md">
<a href="#" class="pull-left navbar-brand">The Driftwood</a>
<button class="navbar-toggler drpbtn" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span style="color:#036">Menu</span> <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
 <ul class="navbar-nav mx-auto">
           <li class="nav-item">
             <a class="nav-link" href="index.html"><i class="fa fa-home" aria-hidden="true"></i>
 Home <span class="sr-only">(current)</span></a></li>
            <li><a class="nav-link" href="photos.html">Photos</a></li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Thing To Do</a>
              <div class="dropdown-menu dropdown-menu-right">
              <a class="dropdown-item" href="http://ryebeachinfo.com/" target="_blank">Rye Beach</a> 
              <a class="dropdown-item" href="https://www.nhstateparks.org/visit/state-parks/jenness-state-beach.aspx" target="_blank">Jenness State Beach</a> 
              <a class="dropdown-item" href="http://www.nhstateparks.com/wallis.html" target="_blank">Wallis Sands Beach</a>
              <a class="dropdown-item" href="http://www.newcastlenh.org/pages/newcastlenh_common/great" target="_blank">Great Island Commons</a> 
              <a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/odiorne-point-state-park.aspx" target="_blank">Odiorn State Park</a>               
             <a class="dropdown-item" href="http://www.nhstateparks.org/visit/state-parks/rye-harbor-state-park.aspx" target="_blank">Rye Harbor State Park</a>  
             <a class="dropdown-item" href="http://www.seacoastsciencecenter.org/" target="_blank">Seacoast Science Center</a>
             <a class="dropdown-item" href="http://www.granitestatewhalewatch.com/" target="_blank">Granite State Whale Watch</a> 
             <a class="dropdown-item" href="http://www.portsmouthharbor.com/" target="_blank">Portsmouth Harbor Cruises</a> 
             </div>
           </li>
            <li><a class="nav-link" href="rates.html">Rates &amp; Booking</a></li>
            <li><a class="nav-link" href="map.html">Map</a></li>  
            <li><a class="nav-link" href="contact.html">Contact</a></li>  
        </ul>
 
        <ul class="navbar-nav">
             <li class="nav-item">
             <a class="nav-link" href="https://www.facebook.com/DriftwoodRentals/" target="_blank">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
   </span>
             </a>
            </li>
             <li class="nav-item">
             <a class="nav-link" href="mailto:Info@DriftwoodRentals.com">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
   </span>
             </a> 
            </li>
            <li class="nav-item">
             <a class="nav-link" href="tel:1-603-501-0465">
              <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
   </span>
             </a>  
             </li>
        </ul>
</div>
</nav>
<header class="masthead">
      <img src="images/Driftwood_Logo.jpg" class="mx-auto d-block img-fluid" alt="Driftwood logo">
</header>     
<!-- /.container -->
<!-- Feature -->
<div class="container"> 
<h1 class="text-center">Welcome to Driftwood Rentals</h1>
<h2 class="text-center">Located on nationally recognized Rye Beach, just steps from Pirate's Coves/Wallis Sands beach and overlooks the majestic marsh.</h2>
<img src="images/Driftwood-aerial.jpg" class="mx-auto d-block img-fluid" alt="Driftwood aerial view">

<p>Welcome to The Driftwood Cottages and Apartments. We are new owners of this seaside vacation spot. Enjoy our charming studios, and one bedroom rustic cottages and two and three bedroom apartments. One minute walk to a pure sandy beach, moments to Portsmouth and all the shopping, whale watches, deep sea fishing, and world class surfing! Our sparkling pool is here for your enjoyment. </p>
<div class="embed-responsive embed-responsive-16by9 center-block">
<iframe width="1920" height="1080" src="https://www.youtube.com/embed/ibkRG1gVtZA?rel=0" allowfullscreen></iframe>
</div>
<p>Our guests can also enjoy our Pool. All cottages have kitchenettes, private bath, screened porch, Cable TV, refrigerator and more!</p>
<p>NO PETS/NO SMOKING ALLOWED!</p>
<p>We are open from May through October</p>

</div>
<div class="clearfix"></div>
<footer class="site-footer">
<p>Copyright &copy; <script>document.write(new Date().getFullYear());</script> The Driftwood</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script> 
var $buoop = {vs:{i:10,f:-4,o:-4,s:8,c:-4},unsecure:true,api:4}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：5)

你的导航是固定的位置，没有任何限制高度 - 这应该工作！

@media (max-width: 767px){
  nav.navbar{
   max-height: 100vh;
   overflow: auto;
  -webkit-overflow-scrolling: touch;
  }
}
相关问题
最新问题