Question

我有一个可在移动模式下折叠但不能在平板电脑模式下折叠的菜单，这就是为什么菜单与我的徽标重叠，这是没有吸引力的。我的菜单是使用bootstrap和php完成的。而php代码正在从word press中检索菜单。但我现在删除PHP代码，并通过查看源代替它。

＆＃13;

.margin-20{margin-top: 20px;}
/*header*/
#header .head-social{background-color: #7DC651; width:100%; height: 37.48px;text-align:right;}
#header .head-social h3 {color: white;font-size: 13px;margin-top: 12px;font-family: 'Open Sans';text-align: right;display: inline-block; padding: 0 20px;}
#header .head-social .social-links {display: -webkit-inline-box;}
#header .head-social .social-links a{text-align:center;float: left;width: 24px;height: 24px;border: 2px solid white;border-radius: 100%;margin-right: 5px; /*space between*/align-items: flex-start;transition: all 0.4s;-webkit-transition: all 0.4s;background-color:white;color:#7DC651; display:flex;}
#header .head-social .social-links a i{align-self:center;color: #7DC651;transition: all 0.4s;-webkit-transition: all 0.4s;margin: 0 auto; font-size: 14px;}
#header .head-social .social-links a i::before{display:inline-block;text-decoration:none;}
#header .site-tele {text-align: right;}
#header .site-tele i{color: black;font-size: 25px;margin-right: 11px;}
#header .site-tele h3{font-family: 'Open Sans'; font-size: 15px;color: black;display: inline-block;}
#header #myNavbar .navbar-nav > li {display: inline-block;margin: 25px auto;}
#header #myNavbar .navbar-nav > li > a {padding-top: 0;padding-bottom: 0;line-height: 14px;color:#676767;float: left;border-right: 2px solid gray;}
#header #myNavbar .navbar-nav li:last-child a{border-right: none;}
#header .navbar.navbar-inverse {border-color: white;background-color: white;}
/*content*/

/*footer*/

/*responsiveness*/

@media screen and (max-width: 767px)
{
#header .head-social {height:86.48px;}
#header .site-logo a img {width: 200px;height: 50px;}
#header .navbar-header button{background-color: #7DC651;}
#header .site-nav nav .navbar-header .navbar-toggle {border-color: #7DC651; background-color: #7DC651;}
#header .navbar-header button span{color: white;}
#header .navbar-header .navbar-toggle:focus, .navbar-header .navbar-toggle:hover {background-color: #7DC651;}
#header .head-social .social-links {margin-right: 14px;}
#header #myNavbar .navbar-nav > li > a {border-right:none;padding-top: 15px;}
#header #myNavbar .navbar-nav > li {display: flex; margin: 0px auto;height: 40px;}
#header .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {border-color: #7DC651;border-bottom-color: rgb(125, 198, 81);border-bottom: 1px solid #7DC651;margin-left: -104px;}
#header #myNavbar .navbar-nav > li:hover {background-color:#7DC651; }
}

@media screen (min-width: 768px) and (max-width: 991px) 
{

}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<header id="masthead" class="site-header" role="banner">

		<div id="header">
			<div class="head-social">
				<div class="container">
					<h3>3 Addres address address add, CT. 06002</h3>
					<div class="social-links">
					    <a href="www.facebook.com" ><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></a>
						<a href="www.twitter.com" ><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
						<a href="www.youtube.com" ><i class="fa fa-youtube fa-lg" aria-hidden="true"></i></a>
						<a href="www.instagram.com" ><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a>
						<a href="www.google.com" ><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></a>
					</div>
				</div>
			</div>
			<div class="container margin-20">
				<div class="row">
					
					<nav class="navbar navbar-inverse">
						<div class="col-xs-4 col-sm-3 col-md-3 site-logo">
							<a href="https://i.pinimg.com/736x/72/d3/dd/72d3dda7ff919e183c682467934010e4.jpg"></a>
						</div>
						<div class="col-xs-8 col-sm-9 col-md-7 site-nav">
							<nav class="navbar" role="navigation">
							    <div class="navbar-header">
							      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							        <span class="icon-bar"></span>
							      </button>
							    </div>
						        <nav class="nav navbar-nav navbar-right" role="navigation">
							        <div id="myNavbar" class="collapse navbar-collapse"><ul id="menu-primarynav" class="nav navbar-nav"><li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-22 current_page_item menu-item-37"><a href="http://localhost/bucarisbraces/">HOME</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost/bucarisbraces/appointments/">APPOINTMENTS</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="http://localhost/bucarisbraces/driving-directions/">DRIVING DIRECTIONS</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://localhost/bucarisbraces/about-us/">ABOUT US</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost/bucarisbraces/about-braces/">ABOUT BRACES</a></li>
</ul></div>								</nav>
							</nav>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-2 site-tele">
							<i class="fa fa-phone fa-lg" aria-hidden="true"></i>
							<h3>1-860-243-8989</h3>
						</div>
					</nav>
				</div>
			</div>
		</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

	</header><!-- #masthead -->

＆＃13;

Answer 1

如果你想从991px折叠bootstrap导航，你可以添加一些CSS来制作你需要的东西。以下是引导导航栏的自定义断点的示例。希望它有所帮助。

function rot13(str) { // LBH QVQ VG!

var strArray = '';

//var right = [70, 82, 69, 69, 32, 67, 79, 68, 69, 32, 67, 65, 77, 80];
//used above variable with String.fromCharCode.apply(null, right); and it worked.

for(var i = 0; i < str.length; i++){
 //console.log(str.charCodeAt(i));
  if(str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 77) {
    strArray = strArray.concat(str.charCodeAt(i) + 13, ' ');
  } else if(str.charCodeAt(i) >= 78) {
    strArray = strArray.concat(str.charCodeAt(i) - 13, ' ');
  } else {
    strArray = strArray.concat(str.charCodeAt(i), ' ');
  }
 }
 return strArray;
}

// Change the inputs below to test
rot13("SERR PBQR PNZC");

如何使菜单在平板电脑模式下折叠（最小宽度：768像素）和（最大宽度：991像素）？

1 个答案: