navbar 相关问题

HTML和XML直接处理页面导航的部分

我想在图片中显示的Navbar中有4列：盒子内的文字应像框中的中间一样居中。您的盒子很重要，以便我可以申请＆

html css navbar

回答 2 投票 0

new new to vue js，希望这只是我错过的东西。我有一个Navbar组件，该组件生成了类似的NAV项目列表： <template> <div class="nav-section"> <nav> <span class="logo">D & E</span> <ul> <li v-for="item in items" :key="item.id"> <a :href="item.href">{{ item.text }}</a> </li> </ul> </nav> </div> </template> <script> import "./navbar.scss"; export default { name: 'NavBar', components: { }, props: { }, data() { return { items: [ { id: 1, href: "/homepage", text: "Home" }, { id: 2, href: "/about", text: "The Wedding" }, { id: 3, href: "/story", text: "Our story" }, { id: 4, href: "/travel", text: "Travel & Stay" }, { id: 5, href: "/response", text: "RSVP" } ] }; }, methods: { }, } </script> ，无论如何，当我单击每个链接时，这看起来像是重新加载主页，因此我永远无法看到一个新页面（显然不是我想要的）。我错过了任何明显的东西吗？补充说，我没有在项目中安装Vue路由器，不确定该如何完成或是否需要？ VUEJS是一个水疗中心，因此您不使用传统的a标签来从页面上移动到页面（例如，在WordPress领域中所做的，例如MPA）。也许会读取有关更多详细信息。如果您想从页面上移动到页面，则need以便使用vuerouter猜测。您需要使用类似的内容来定义/router/index.js文件中的路由 import Vue from "vue"; import VueRouter from "vue-router"; import CustomersName from "../views/CustomersName.vue"; import HomeView from "../views/HomeView.vue"; import AboutView from "../views/AboutView.vue"; Vue.use(VueRouter); const routes = [ { path: "/", name: "index", component: HomeView, }, { path: "/about", name: "about", component: AboutView, }, { path: "/customers/:name", name: "customers-name", component: CustomersName, }, ]; const router = new VueRouter({ mode: "history", base: process.env.BASE_URL, routes, }); export default router; 并使用router-link移至给定的页面 <router-link to="/about">about page</router-link>

vue.js vue-router navbar href nav

回答 1 投票 0

我的汉堡菜单被卡住了，我不知道如何修复它

因此，我正在为Uni的最新版本的Bootstrap创建一个站点，但是我的导航菜单被卡住了，当您滚动时，它会停留在屏幕上和所有其他内容上。请...

html button bootstrap-5 navbar hamburger-menu

回答 1 投票 0

解决搜索输入和小型分辨率的Navbar中的提交按钮的问题当我意识到搜索框并提交旁边的搜索框并提交按钮时（在大多数屏幕宽度上对右侧对齐）时，我正在对网页进行搜索视图。

html

css bootstrap-4 alignment navbar

回答 1 投票 0

，但它不起作用。我也有一个下拉菜单项，当我使用上述解决方案之一时，它不起作用，因此我使用了两个解决方案来解决此问题，但是Toggler的问题仍然存在。任何建议都会有所帮助。

bootstrap-5 navbar

回答 1 投票 0

如何根据要求更改Navbar的颜色？

javascript foreach navbar

回答 1 投票 0

javaScript不会根据要求更改纳维尔颜色，怎么了？

javascript foreach navbar

回答 1 投票 0

bootstrap：navbar：如何证明可折叠式菜单合理的菜单？

在navbar中的引导程序，我如何justify-content-end可折叠菜单的内容？在下面的最低工作示例中，该行： <div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth"> continains concantains cos是正确的，但是我试图留下一切合理，但在剩下的剩下时尽可能地将所有东西推到左边。 text-end和justify-content-end不起作用，因为它们需要ms-auto，这阻止了对象崩溃。 d-flex try改变这一点：<!DOCTYPE html> <html lang="en" data-bs-theme="dark"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, width=device-width"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> </head> <body> <body> <nav class="navbar bg-body-tertiary"> <div class="container-fluid" id="navbarParent"> <button class="navbar-toggler d-flex align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> <img class="d-inline-block align-text-center mx-1" width="24" height="24" src="{{ url_for('static', filename='brand.png') }}" alt="Logo" > <span class="navbar-brand">brand</span> </button> <button class="navbar-toggler align-items-center justify-content-center" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAuth"> [email protected] </button> <div class="collapse navbar-collapse" data-bs-parent="#navbarParent" id="navbarNav"> <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;"> <li class="nav-item"><a class="nav-link" href="/elec/list" >List</a></li> <li class="nav-item"><a class="nav-link" href="/elec/create" >Create</a></li> <li class="nav-item"><a class="nav-link" href="/elec/join" >Join</a></li> </ul> </div> <div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth"> <ul class="navbar-nav navbar-nav-scroll my-2 my-lg-2" style="--bs-scroll-height: 60vh;"> <li class="nav-item"><a class="nav-link" href="/auth/account" >Account</a></li> <li class="nav-item"><a class="nav-link" href="/auth/logout" >Logout</a></li> <li class="nav-item"><a class="nav-link" href="/about" >About</a></li> </ul> </div> </div> </nav> </body> </html> to以下：<div class="collapse navbar-collapse text-end" data-bs-parent="#navbarParent" id="navbarAuth"> 希望它有帮助！

html bootstrap-5 navbar collapsable

回答 1 投票 0

使用Active Navbar State

javascript html css navigation navbar

回答 1 投票 0

如何通过修改_quarto.yml？ thegiven a _quarto.yml，例如：项目：类型：网站网站：标题：“ mytitle” NAVBAR：徽标：“ file.png” 左边： -HREF：index.qmd 文字：家 -...

project: type: website website: title: "myTITLE" navbar: logo: "file.png" left: - href: index.qmd text: Home - about.qmd - license.qmd - citation.qmd

navbar quarto

回答 1 投票 0

如何使用brand.yml？

html navbar quarto

回答 1 投票 0