大家好，我有一个引导程序导航栏，它的工作原理很棒，但是在col-md断点处，我希望出现navbar-toggle按钮，是否可以使用完整的引导程序主要样式来做到这一点？这是我的导航栏代码（header.php）
<?php session_start();
if (isset($_SESSION['activated'])) {
$activated = $_SESSION['activated'];
}
if (isset($_SESSION['success']) and $_SESSION['success'] == true) {
$success=true;
}
else {
$success=false;
}
?>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!--vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="custom.js"></script>
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div id="logInApp" v-cloak>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if(basename($_SERVER['PHP_SELF']) != 'templates.php') {
echo ' <a class="navbar-brand" href="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve">
<path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48
c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9
c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1
l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9
v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7
l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1
l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
<text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text>
</svg><span class="logo-text">CreativeEngine</span></a>';
} else {echo ' <a class="navbar-brand" href="index.php"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 171 171" style="enable-background:new 0 0 171 171;" xml:space="preserve">
<path class="st0" d="M153.4,91l-30.2,8c-4.2,11.5-13.5,20.6-26.1,24.1c-20.7,5.7-42.2-6.5-48-27.2c-5.7-20.7,6.5-42.2,27.2-48
c15.9-4.4,32.5,0.9,41.9,15.1l-19.5,5.3c-3.4-2.4-7.6-3.8-12-3.8c-11.6,0-20.9,9.4-20.9,20.9s9.4,20.9,20.9,20.9
c8.5,0,15.8-5.1,19.1-12.3L153.5,81l0.7,0l11.4-6.7L163,62.6l-13.1-1.3l-4.3-9.1l7.3-11l-7.4-9.4l-12.4,4.5l-7.9-6.4l1.8-13.1
l-10.7-5.2l-9.2,9.5l-9.8-2.3l-4-12.6L81.3,6.1l-4.2,12.5l-9.9,2.2l-9.1-9.6l-10.8,5.1L49,29.4l-7.9,6.2L28.7,31l-5.2,6.4l-2.3,2.9
v0l7.2,11.1l-0.9,1.8l-3.6,7.3l-13.2,1.1L8,73.1L19.3,80l-0.1,10.1L7.9,96.9l2.6,11.6l13.1,1.3l4.3,9.1l-7.3,11v0l3.7,4.7l3.7,4.7
l12.4-4.5l0.2,0.1l0,0l5.8,4.7l1.9,1.5l-1.8,13.1l10.7,5.2l9.2-9.5l9.8,2.3l4,12.6l11.9,0.1l4.2-12.5l9.9-2.2l9.1,9.6l10.8-5.1
l-1.6-13.1l7.9-6.2l12.4,4.7l7.5-9.3l-7.2-11.1l4.4-9.1l13.2-1.1l2.7-11.6L154.1,91L153.4,91z"/>
<text transform="matrix(1 0 0 1 145.3561 17.4842)">TM</text>
</svg><span class="logo-text">CreativeEngine</span></a><ul><li class="hidden-lg visible-md visible-sm visible-xs fa fa-search" data-target="#searchTemplatesModal" data-toggle="modal" id="templateSearchIcon"></li><ul>';}
?>
</div><!--end .navbar-header-->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li v-show="admin==true"><a href="adminMenu.php">Admin</a></li>
<li><a href="#">Subscriptions</a></li>
<li><a href="templates.php">Templates</a></li>
<li><a href="#">Stock</a></li>
<li v-show="sesloggedin==true"><a href="#">Profile</a></li>
<li v-show="sesloggedin==false"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a></li>
<li v-show="sesloggedin==true"><a href="logout.php">Logout</a></li>
<li><a href="signup.php">Signup</a></li>
</ul>
</div><!--end #navbar-->
</div><!--end container-->
</nav>
<div class="container">
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--modal header-->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h2 class="modal-title">Login</h2><!--end modal-title-->
</div>
<!--end modal-header-->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="username">Username/Email</label>
<input v-on:click="error=false; loginSub=false;" v-model="userName" type="text" class="form-control" placeholder="Username/Email" id="username" name="userName" v-on:keyup.enter="submit">
<a href="#">Forgot Username</a>
</div><!--end username-->
<div class="form-group">
<label for="password">Password</label>
<input v-on:click="error=false; loginSub=false;" v-model="password" type="password" v-on:keyup.enter="submit" class="form-control" placeholder="Password" name="password" id="password">
<a href="#">Forgot Password</a>
</div><!--end password-->
</form>
<div v-show="error==true || userName.length<=7 && loginSub==true || password.length<=7 && loginSub==true"><small class="error">Username/Email or password was incorrect...Try again</small>
</div><!--end incorrect password message-->
</div><!--end modal-body-->
<div class="modal-footer">
<button type="button" v-on:click="submit" class="btn btn-primary btn-block">Login</button>
</div><!--end modal-footer-->
</div><!--end modal-content-->
</div><!--End modal-dialog-->
</div><!-- End #loginModal -->
<div class="modal fade" id="notActivatedModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<a href="logout.php" role="button" class="close" data-dismiss="modal">X</a>
<h2 class="modal-title">Please Activate your account</h2>
</div>
<div class="modal-body">
<p>Please check your email and click on the activation link before signing in.</p>
</div>
<div class="modal-footer">
<a href="logout.php" role="button" class="btn btn-primary btn-block">Ok</a>
</div><!--end .modal-footer-->
</div><!--end .modal-header-->
</div><!--end modal-dialog-->
</div><!-- end #notActivatedModal-->
</div><!-- End .container-->
</div><!-- End #loginApp-->
<?php //Make the activation modal work so that they cant click off of it and forces them to activate their account.
if (isset($activated) && $activated == 0) {
echo "<script>
$('#notActivatedModal').modal('show');
$('#notActivatedModal').modal({backdrop: 'static', keyboard: false});</script>";
}
?>
<script>
var app = new Vue({
el: '#logInApp',
data: {
userName: '',
password: '',
success: '<?php echo $success;?>',
error: '',
loginSub: '',
response: [],
sesusername: '<?php if (isset($_SESSION['username'])) {echo $_SESSION['username'];}?>',
sesemail: '<?php if (isset($_SESSION['email'])) { echo $_SESSION['email'];}?>',
sesloggedin: '<?php if (isset($_SESSION['loggedin'])) {echo $_SESSION['loggedin'];}?>',
sesfirstname: '<?php if (isset($_SESSION['firstname'])) {echo $_SESSION['firstname'];}?>',
seslastname: '<?php if (isset($_SESSION['lastname'])) {echo $_SESSION['lastname'];}?>',
sesphone: '<?php if (isset($_SESSION['phonenumber'])) {echo $_SESSION['phonenumber'];}?>',
sescompanyname: '<?php if (isset($_SESSION['companyname'])) {echo $_SESSION['companyname'];}?>',
admin: '<?php if (isset($_SESSION['admin'])) {echo $_SESSION['admin'];}?>'
},
created: function() {
this.loginSub = false;
},
methods: {
submit: function() {
this.loginSub = true;
if (this.userName.length >= 8 && this.password.length >= 8) {
var jsonString = JSON.stringify({
userName: this.userName,
password: this.password
});
$.ajax({
url: "login.php",
method: "POST",
dataType: "JSON",
data: jsonString,
success: function(data) {
var vueapp = this;
vueapp.response = data;
vueapp.error = data.error;
if(this.error==false){
$('#loginModal').hide();
}
if(data.success==true){location.reload();}
console.log(data);
}.bind(this)
});
}
}
}
});
</script>
这是我的自定义css文件，我在其中进行了一些自定义样式以获取所需的效果。我遇到的问题是我的搜索图标出现在中等的断点处，因为它应该将导航栏中的其余内容悬停在汉堡包中，或者在中等的刹车踏板上切换，为了获得所需的效果，我需要它来。如果有人有什么好主意或建议。
*{font-family: 'Raleway', sans-serif;}
nav a{
color: white;
font-weight: bold;
}
nav {background-color: #1c71b9; z-index: 1;}
.icon-bar{background-color: white;}
.navbar-brand:hover{background-color: white;
color: #1c71b9;
}
body{background-color: white;
}
h1, h2, h3, h4, h5, h6, p{
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.row + .row{margin-top: 20px;}
.itemHeading{font-weight: bold;}
.icon{display: block; max-width: 100%; margin-top: 10px;}
.descriptionHeading{margin-top: 20px; text-align: center;}
.descriptionSection{background-color: #e5e5e5;}
.mainDescriptionHeading{text-align: center;}
.descriptionParagraph{text-align: center;}
.centerDescriptionButton{padding-bottom: 20px;}
.mainHeading{text-align: center;}
.error{color: red;}
.success{color: green;}
.formQuestion{color: #1c71b9;}
.overlay{position: absolute;
display: flex;
top: 0;
bottom: 0px;
left: 0;
right: 0;
align-items: center;
justify-content: center;
flex-direction: column;
color: white;
text-align: center;
}
.videoButtonWrapper{
flex-direction: row;
margin-bottom: 30px;
position: relative;
}
.videoBackgroundWrapper{position: relative; width: 100%;}
.videoBackground{width: 100%;}
#signupApp{margin-top: 50px;}
nav svg{ height: 100%; fill: white;}
.navbar-brand:hover>svg{height: 100%; fill: #1c71b9;}
.logo-text { position:relative; margin-left: 5px; top:-3px; }
/* Added this for a circular button does not actually exist in bootstrap
however sense I write all the other button classes like this I wanted to keep it uniform*/
.btn-circle {
text-align: center;
border-radius: 15px;
}
.formQuestion + .tooltip>.tooltip-inner{background-color: darkblue; font-weight:bold;}
.success + .tooltip>.tooltip-inner{background-color: green; font-weight:bold;}
.error + .tooltip>.tooltip-inner{background-color: red; font-weight:bold;}
.videoHeading{text-shadow: 2px 2px black;}
.videoText{text-shadow: 2px 2px black; font-weight: bold;}
h1, h2, h3, h4, h5, h6{font-weight: bold;}
.content{margin-top: 50px;}
.profileSection{ box-shadow: 0 0 5px; padding: 15px; background-color: white; margin-top: 30px;}
#profileInfo{margin-top: 70px;}
#updateProfileInfoModal{overflow-y: auto;}
/* Slider checkbox */
.sliderWrapper{display: inline-block;margin:0px; position:relative;}
.sliderWrapper div{display: inline-block;line-height:60px;}
/* The switch - the box around the slider */
.switch {
vertical-align: middle;
position: relative;
display: inline-block;
padding:0px;
width: 54px;
height: 28px;
margin-left: 10px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d7d7d7;
-webkit-transition: .4s;
transition: .4s;
border-radius: 13px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {background-color: #1c71b9;}
input:focus + .slider {box-shadow: 0 0 1px #1c71b9;}
input:checked + .slider:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}
/*Cards*/
.card{width: 100%; margin-bottom: 30px; box-shadow: 0 0 5px; padding: 15px; background-color: white;}
.card video{width:100%;}
.card-title{font-weight: bold;}
@media only screen and (max-width : 3840px) {
.card video {height: 150px;}
}
@media only screen and (max-width : 990px) {
.card video {height: auto;}
}
#templateSearchIcon{
color: white;
padding-top: 18px;
padding-left: 8px;
font-weight: 700;
cursor: pointer;
width: 30px;
height: 50px;
float: right;
}
#templateSearchIcon:hover{
background-color: white;
color: #1c71b9;
}