Bootstrap导航栏折叠未正确格式化
下面是Bootstrap Navbar的标记 - 这是通过数据库从代码隐藏生成的 - 问题是正确对齐的项目被推送到其余菜单项下，直到浏览器宽度小于左对齐项目，然后它正常行动。
任何想法我做错了什么？
由于
标记
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./" class="navbar-brand">Application name</a>
</div>
<div id="MainNavBar" class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a title="Return to the home page" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl12", "", false, "", "Default", false, true))">Home</a></li>
<li><a title="Ways to contact us" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl14", "", false, "", "Contactus", false, true))">Contact</a></li>
<li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" title="Latest News" href="#">News<b class="caret"></b></a><ul class="dropdown-menu">
<li><a title="Latest News" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl20", "", false, "", "News/News", false, true))">News</a></li>
<li><a title="View Events" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl22", "", false, "", "events", false, true))">Events</a></li>
</ul>
</li>
<li><a title="Recommended Suppliers" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl24", "", false, "", "external", false, true))">External</a></li>
<li class="dropdown"><a class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown" title="Property for sale" href="#">Property<b class="caret"></b></a><ul class="dropdown-menu">
<li><a title="Property for sale" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl30", "", false, "", "Property/8", false, true))">For sale</a></li>
<li><a title="Property for lease" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl32", "", false, "", "Property/9", false, true))">For Lease</a></li>
</ul>
</li>
<li><a title="Local Information and services" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl34", "", false, "", "Content/10", false, true))">Local</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl37", "", false, "", "Secure/Landing/2", false, true))">Homeowners</a></li>
<li><a runat="server" href="https://oursite.com/hoa3_vendors/secure/landing/2" title="Login Section for Vendors Only">Vendors</a></li>
</ul>
</div>
</div>
</div>
============= UPDATE =====
这似乎适用于当前设置，现在它“只需”是动态的
@media only screen and (min-width: 790px) {
.collapse {
display: block;
}
.navbar-header {
display: none;
}
}
@media only screen and (max-width: 790px) {
.collapse {
display: none;
}
.navbar-header {
display: block;
}
}
2 个答案:
答案 0 :(得分：1)
您是否阅读过Bootstrap文档？
我认为你的问题主要是C.
来自Getbootstrap.com＆gt;
内容溢出：
由于Bootstrap不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：
A）减少导航栏项目的数量或宽度。
B）使用响应式实用程序类隐藏某些屏幕尺寸的某些导航栏项目。
C）更改导航栏在折叠模式和水平模式之间切换的点。自定义@ grid-float-breakpoint变量或添加自己的媒体查询。
答案 1 :(得分：1)
非常感谢克里斯蒂娜和迈克尔让我走上了正确的道路。
由于菜单的动态构建，修改现有的CSS值不起作用。最后，我发现这是处理问题的最佳方法（在创建菜单项时定义WidthSetting）。对于链接值较小的菜单项，不需要运行
Private Sub SetMenu(WidthSetting As Integer)
Try
Dim SB As New StringBuilder
SB.Append("$(document).ready(function(){ ")
SB.Append("$('body').append(")
SB.Append("""<style>")
SB.Append("@media only screen and (min-width: " & WidthSetting & "px) {")
SB.Append(".collapse {")
SB.Append("display: block;")
SB.Append(" }")
SB.Append(".navbar-header {")
SB.Append(" display: none;")
SB.Append(" }")
SB.Append("}")
SB.Append("@media only screen and (max-width: " & WidthSetting & "px) {")
SB.Append(".collapse {")
SB.Append("display: none;")
SB.Append(" }")
SB.Append(".navbar-header {")
SB.Append(" display: block;")
SB.Append(" }")
SB.Append("}")
SB.Append("</style>""); ")
SB.Append("}); ")
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "SetMenu", SB.ToString, True)
Catch ex As Exception
Dim vError As New SendError
vError.MailError(497, PageName, ex)
End Try
End Sub
当菜单项非常长时，这会遇到问题 - 在折叠状态下，最后几个菜单项超出范围。
这是允许溢出的最终（他自信地说）解决方案
Private Sub SetMenu(WidthSetting As Integer)
Try
Dim SB As New StringBuilder
SB.Append("$(document).ready(function(){ ")
SB.Append("$('body').append(")
SB.Append("""<style>")
SB.Append("@media (max-width: " & WidthSetting & "px) { ")
SB.Append(".navbar-header { ")
SB.Append("float: none; ")
SB.Append("} ")
SB.Append(".navbar-left, .navbar-right { ")
SB.Append("float: none !important; ")
SB.Append("} ")
SB.Append(".navbar-toggle { ")
SB.Append("display: block; ")
SB.Append("} ")
SB.Append(".navbar-collapse { ")
SB.Append("border-top: 1px solid transparent; ")
SB.Append("box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); ")
SB.Append("} ")
SB.Append(".navbar-fixed-top { ")
SB.Append("top: 0; ")
SB.Append("border-width: 0 0 1px; ")
SB.Append("} ")
SB.Append(".navbar-collapse.collapse { ")
SB.Append("display: none !important; ")
SB.Append("} ")
SB.Append(".navbar-nav { ")
SB.Append("float: none !important; ")
SB.Append("margin-top: 7.5px; ")
SB.Append("} ")
SB.Append(".navbar-nav > li { ")
SB.Append("float: none; ")
SB.Append("} ")
SB.Append(".navbar-nav > li > a { ")
SB.Append("padding-top: 10px; ")
SB.Append("padding-bottom: 10px; ")
SB.Append("} ")
SB.Append(".collapse.in { ")
SB.Append("display: block !important; ")
SB.Append("} ")
SB.Append(".navbar-collapse.in { ")
SB.Append("overflow-y: auto !important; ")
SB.Append("} ")
SB.Append(".navbar-nav .open .dropdown-menu { ")
SB.Append("position: static; ")
SB.Append("float: none; ")
SB.Append("width: auto; ")
SB.Append("margin-top: 0; ")
SB.Append("background-color: transparent; ")
SB.Append("border: 0; ")
SB.Append("box-shadow: none; ")
SB.Append("} ")
SB.Append(".navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { ")
SB.Append("padding: 5px 15px 5px 25px; ")
SB.Append("} ")
SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a { ")
SB.Append("color: #999; ")
SB.Append("} ")
SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, ")
SB.Append(".navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { ")
SB.Append("color: #fff; ")
SB.Append("background-color: transparent; ")
SB.Append("background-image: none; ")
SB.Append("} ")
SB.Append("} ")
SB.Append("</style>""); ")
SB.Append("}); ")
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "SetMenu", SB.ToString, True)
Catch ex As Exception
Dim vError As New SendError
vError.MailError("481", PageName, ex)
End Try
End Sub
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？