Javascript 引导大下拉菜单卡在左侧
我对使用引导的菜单有问题。小的下拉菜单打开良好并对齐，但是大的下拉菜单始终向左对齐，即使菜单标题位于屏幕的最右侧 我希望有以下情况之一发生 ＜p＞1 -在标题下的中间开口。 2-如果其位于最左侧，则向右打开 3-如果其位于最右侧，则向左打开 我把这个问题弄得一团糟 我怎样才能实现上述目标Javascript 引导大下拉菜单卡在左侧,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我对使用引导的菜单有问题。小的下拉菜单打开良好并对齐，但是大的下拉菜单始终向左对齐，即使菜单标题位于屏幕的最右侧 我希望有以下情况之一发生 ＜p＞1 -在标题下的中间开口。 2-如果其位于最左侧，则向右打开 3-如果其位于最右侧，则向左打开 我把这个问题弄得一团糟 我怎样才能实现上述目标 <div class="navbar-cont"> <div class="container"> <div class="row"> <di
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li><a href="/">Home</a>
</li>
<li><a href="/products">Products</a>
</li>
<li><a href="/about-us">About Us</a>
</li>
<li><a href="/contact">Contact Us</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">About Us</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">My Account</a>
</li>
<li><a href="#">Wish List</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Large Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a>
</li>
<li class="disabled"><a href="#">How to use</a>
</li>
<li><a href="#">Examples</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a>
</li>
<li><a href="#">Aligninment options</a>
</li>
<li><a href="#">Headers</a>
</li>
<li><a href="#">Disabled menu items</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Button toolbar</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Nesting</a>
</li>
<li><a href="#">Vertical variation</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Checkboxes and radio addons</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a>
</li>
<li><a href="#">Pills</a>
</li>
<li><a href="#">Justified</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">This Is Really Large Title <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a>
</li>
<li class="disabled"><a href="#">How to use</a>
</li>
<li><a href="#">Examples</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a>
</li>
<li><a href="#">Aligninment options</a>
</li>
<li><a href="#">Headers</a>
</li>
<li><a href="#">Disabled menu items</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Button toolbar</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Nesting</a>
</li>
<li><a href="#">Vertical variation</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Checkboxes and radio addons</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a>
</li>
<li><a href="#">Pills</a>
</li>
<li><a href="#">Justified</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Just Another Menu Type<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a>
</li>
<li class="disabled"><a href="#">How to use</a>
</li>
<li><a href="#">Examples</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a>
</li>
<li><a href="#">Aligninment options</a>
</li>
<li><a href="#">Headers</a>
</li>
<li><a href="#">Disabled menu items</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Button toolbar</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Nesting</a>
</li>
<li><a href="#">Vertical variation</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Checkboxes and radio addons</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a>
</li>
<li><a href="#">Pills</a>
</li>
<li><a href="#">Justified</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">About Us</a>
</li>
<li><a href="#">Contact Us</a>
</li>
<li><a href="#">My Account</a>
</li>
<li><a href="#">Wish List</a>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a>
</li>
<li class="disabled"><a href="#">How to use</a>
</li>
<li><a href="#">Examples</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a>
</li>
<li><a href="#">Aligninment options</a>
</li>
<li><a href="#">Headers</a>
</li>
<li><a href="#">Disabled menu items</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Button toolbar</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Nesting</a>
</li>
<li><a href="#">Vertical variation</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a>
</li>
<li><a href="#">Sizing</a>
</li>
<li><a href="#">Checkboxes and radio addons</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a>
</li>
<li><a href="#">Pills</a>
</li>
<li><a href="#">Justified</a>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a>
</li>
<li><a href="#">Buttons</a>
</li>
<li><a href="#">Text</a>
</li>
<li><a href="#">Non-nav links</a>
</li>
<li><a href="#">Component alignment</a>
</li>
<li><a href="#">Fixed to top</a>
</li>
<li><a href="#">Fixed to bottom</a>
</li>
<li><a href="#">Static top</a>
</li>
<li><a href="#">Inverted navbar</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
切换导航
-
-
-
-
-
-
-
-
-
-
-
图标图标
-
-
-
- 下拉列表
-
-
-
-
-
按钮组
-
-
-
-
-
按钮下拉列表
-
输入组
导航系统
导航栏
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
@media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}