gpt4 book ai didi

html - 为什么我的 Bootstrap Toggle Navbar 消失了?

转载 作者:行者123 更新时间:2023-11-28 04:34:29 28 4
gpt4 key购买 nike

因此,在我将页面折叠到它应该出现的位置后,“汉堡包”切换导航栏图标似乎不可见。 3 个图标栏和实际按钮都是不可见的。但是,它似乎仍然有效,因为它在单击时会下降。我已经使用 Google Chrome 中的“检查元素”功能查看了影响它的样式,切换和更改了许多样式都无济于事。

谁能帮我理解为什么会这样?

enter image description here

这是一张说明问题的图片和我的代码:

<style>

/*body {
background-color: #c0c0c0;
}*/

@media (max-width: 767px) {

}

@media (min-width: 768px) {
/*.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}*/

body {

}

.navbar-nav > li {
border-left: 1px solid;
}

.navbar {
border-radius-bottom-left: 5px;
border-radius-bottom-right: 5px;
/* background-color: #99ccff;*/
width: 100%;
}

.nav>li>a:hover, .nav>li>a:focus {
/*background-color: #eee !important;*/
}
}
.navbar {
/* background-color: #99ccff; */
border: 1px solid;
}


</style>

<title> Bootstrap Testing </title>
</head>
<body role = "document">

<div class = "row-fluid">
<div class = "col-lg-9">
<img src = "pics/edviewrateBanner.png">
</div>

<div class = "col-lg-3">
<button type="button" class="btn btn-lg btn-primary visible-lg">Sign In</button>
</div>
</div>

<div class = "row-fluid">
<div class = "col-lg-3 col-lg-offset-9 hidden-xs">
<button type="button" class="btn btn-lg btn-primary" style = "visibility: hidden;">ButtonToTakeUpSpace</button>
</div>
</div>

<div class = "row-fluid">
<div class = "col-lg-12">
<nav class = "navbar" role = "navigation">
<div class = "container-fluid">

<div class = "navbar-header">
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#mainNavbarInfo">
<span class = "sr-only"> Toggle navigation </span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand visible-xs visible-sm" href = "#"> EdViewRate</a>
</div>

<!-- Begin Navbar items -->
<div class = "collapse navbar-collapse" id = "mainNavbarInfo">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><a href = "#"><span class = "glyphicon glyphicon-home"></span> Home </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> </li>
<li><a href = "#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign up </a></li>

<li class = "dropdown visible-xs visible-sm visible-md">
<a class = "dropdown-toggle" href = "#" data-toggle="dropdown"><span class = "glyphicon glyphicon-share-alt"></span> Sign In <strong class = "caret"></strong></a>
<div class = "dropdown-menu" style = "padding: 15px; padding-bottom: 10px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>

<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>

</div>

</div>
</nav>
</div>
</div>

最佳答案

问题是您没有指定用于导航栏的“主题”。您必须在 nav 元素上使用 navbar-defaultnavbar-inverse 类以及 navbar 类。

http://jsfiddle.net/65KdX/1/

在执行此操作时,所有 Bootstrap CSS 似乎对 navbar-toggle 所做的是将 #dddborder-color 应用于它。您可能会省略 navbar-default 类,但是没有人告诉您可能会遇到 navbar 的其他样式问题。最好应用该类,然后覆盖您不想要/不需要的特定内容。

关于html - 为什么我的 Bootstrap Toggle Navbar 消失了?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23402384/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com