gpt4 book ai didi

css - 无法在 Bootstrap 的导航栏中找到或创建下拉菜单

转载 作者:行者123 更新时间:2023-11-28 08:19:17 25 4
gpt4 key购买 nike

现在,在我开始之前,我可以说我已经彻底搜索了互联网的每个 Angular 落来寻找这个问题的答案,但我找不到。

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

我对 bootstrap 的经验几乎为零,这可以解释当我看到所有这些 html 文件被扔来扔去时我的困惑,而我在那里只需要 .js 和 .css bootstrap 文件。

在尝试设置 Bootstrap 下拉菜单或类似的东西时,我不知道从哪里开始。没有任何帮助,因为它只是跳到说“使用这个 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”部分放置什么。我试过这个 http://getbootstrap.com/components/#dropdowns在“对齐”部分下。这些技巧似乎都不起作用。有什么建议吗?

最佳答案

你并没有付出太多努力,但这是我解决同样问题的方法(使用 AngularJS,但你可以很容易地转换为 vanilla JS)。

您单击按钮以展开下拉菜单,并在单击时将 showSubMenu 设置为 true。然后显示那个 div,瞧瞧。

<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>

关于css - 无法在 Bootstrap 的导航栏中找到或创建下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28842494/

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