无法在导航栏中找到或创建下拉菜单以进行引导

时间:2015-03-03 21:42:52

标签: css twitter-bootstrap navbar

现在,在我开始之前,我可以说我已经彻底搜索了互联网的每个角落以获得答案,我找不到答案。

继续,我已经尝试过阅读任何bootstrap的指南,这是零帮助。我正在使用由其他人创建的插件,它显然是在引导程序中“包裹”,仅用于主题/ css。网站本身的所有编程都是由他/我添加到它的任何php脚本完成的。相信我,我以前和他联系过,他没有帮助。

我几乎没有使用bootstrap的经验,当我看到所有这些html文件被抛出时,这可以解释我的困惑,而我只需要.js和.css引导文件。

我不知道在尝试设置引导下拉菜单或类似的东西时从哪里开始。没有任何帮助,因为它只是直接说'使用这个HTML并且它有效',我不知道在哪里放它,我不知道css编辑做什么。我知道使用了stackoverflow,所以你可以快速得到简短的答案来修复你的代码等等,我并不是要问一个完整的问题,比如“为我设置这个”,但互联网上什么也没有帮助所以我在这里询问是否有人知道它。谢谢。

如果重要,这是我正在使用的预制主题:http://bootswatch.com/cyborg/

编辑: 我第五次浏览了每个文件的所有文件和每一行,我终于找到了一些东西。 HTML总是在我的header.php中的一个单独的文件夹中,除了bootstrap。这是HTML代码。

		<!DOCTYPE html>
			<html lang="en">

			<head>
				<meta charset="utf-8">
				<meta http-equiv="X-UA-Compatible" content="IE=edge">
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<meta name="description" content="">
				<meta name="author" content="">

				<title>Server Highscores</title>

				<!-- Bootstrap Core CSS -->
				<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

				<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
				
				<!-- Custom CSS -->
				<link href="main.css" rel="stylesheet">
			</head>

			<body>
				<!-- Navigation -->
				<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
					<div class="dropdown">
						<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
						  Dropdown
						  <span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
							<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
						</ul>
					</div>
					<div class="container">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
								<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" href="index.php">Scoreboards</a>
						</div>
						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container -->
			</nav>
			
			<div class="container" style ="min-height:90%;">
另外请记住,选项卡的默认名称以及下拉列表的默认名称现在只是占位符。 这是整个HTML部分。现在出现下拉按钮,我对此感到非常高兴,尽管我还有一些问题。按钮位于右上角。我猜这是CSS发挥作用的时候,但我不确定将什么放在css的“。dropdown-menu”部分。我在'alignment'部分下尝试了这个http://getbootstrap.com/components/#dropdowns。这些提示似乎都不起作用。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

你没有给予太多的帮助,但这里是我解决同样问题的方法(使用AngularJS,但你很容易翻译成香草JS)。

单击按钮以展开下拉列表,单击时将showSubMenu设置为true。然后显示div,et voila。

<li data-ng-init="showSubMenu = false" ng-click="showSubMenu = !showSubMenu">
   <a>Click Me For Dropdown</a>
</li>

<div data-ng-show="showSubMenu">
   <ul>
      <li><a>Submenu Item 1</a></li>
      <li><a>Submenu Item 2</a></li>
   </ul>
</div>