标签: navbar

Bootstrap 嵌套导航栏

如何在 Bootstrap 3 中构建嵌套导航栏？

这个小提琴非常接近我想要的，除了我希望辅助选项卡始终可见。在小提琴中，一切都是切换。另外，我想使用 navbar-inverse，但是在小提琴中，如果我从 navbar-default 更改为 navbar-inverse，菜单将不再起作用！

下面我包含了一些接近我想要的代码。单击主页时应出现第二个菜单，选择第 1 页时应出现第三个菜单，依此类推。

这可以做到吗？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#nav1">Home</a></li>
      <li><a href="#nav2">Page 1</a></li>
      <li><a href="#2">Page 2</a></li> 
      <li><a href="#3">Page 3</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav1" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home1</a></li>
      <li><a href="#">Page 12</a></li>
      <li><a href="#">Page 22</a></li> 
      <li><a href="#">Page 32</a></li> 
    </ul>
  </div>
</nav>

<nav id="nav2" class="navbar navbar-inverse">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li …

Run Code Online (Sandbox Code Playgroud)

html jquery navbar twitter-bootstrap-3

Bry*_*ler

2016 06-14

2
推荐指数

1
解决办法

5231
查看次数

导航栏不会变成汉堡包 - bootstrap / Flask

我的导航栏在小屏幕尺寸下无法正确显示：https://www.paulahuevo.com/

我将 Bootstrap Material Design 与 Flask 结合使用，并为导航栏提供以下代码：

<!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark purple">
        <div class='container'>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">

            <ul class="navbar-nav">
            {% for href, id, caption in navigation_bar %}

                <li{% if id == active_page %} class="active"{% endif %}>

                <a class="nav-link" href="{{ href|e }}">{{ caption|e }}</a>
                </li>

            {% endfor %}
            </ul>
        </div>
        </div>
    </nav>

Run Code Online (Sandbox Code Playgroud)

我从未使用过 bootstrap，我错过了什么？

css navbar bootstrap-4

Pau*_*evo

2018 01-15

2
推荐指数

1
解决办法

1354
查看次数

Bootstrap 导航栏图像尺寸太大

我是 Bootstrap 4 的新手，我有一个关于导航栏的问题。因此，我希望旁边有我的公司名称及其徽标，但由于某种原因，图像太大了。我可以做什么来更改图像的大小以适合导航栏内部。谢谢你！

<nav class="navbar navbar-expand-sm fixed-top">
    <div class="container">
      <a href="index.html" class="navbar-brand text-dark display-4">
        <img id="ojLogo" src="img/ojicon.png"> OddJob
      </a>
    </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

html navbar bootstrap-4

作者

lucky-day

2
推荐指数

1
解决办法

1万
查看次数

当转换反转时，可以禁用/更改 CSS 的转换延迟吗？

我目前正在尝试制作各种下拉菜单。这个想法是，当你悬停它时，宽度增加，0.5 秒后高度增加。然而，延迟也适用于转换的“回滚”部分，破坏了一切。所以我想知道是否有可能改变延迟，以便高度在宽度之前恢复。

代码：

/*General NOT IMPORTANT*/

* {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: black;
}


/*dropdown menu*/

.drop-down {
  height: 50px;
  width: 50px;
  display: flex;
  align-items: center;
  transition-property: height, width;
  transition-duration: 500ms, 500ms;
  transition-delay: 500ms, 0ms;
}

.droplist {
  height: 50px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 50% 50% 10% 10%;
  transition-property: width, height, background-color;
  transition-duration: 500ms, 500ms, 0ms;
  transition-delay: 0ms, 500ms, 500ms;
}

.lidiv {
  height: 50px;
  width: …

Run Code Online (Sandbox Code Playgroud)

html css navbar

Ian*_*vos

2020 11-01

2
推荐指数

1
解决办法

52
查看次数

导航栏切换器在 Bootstrap 5 中不工作

我正在使用 Bootstrap 5 设计响应式页面，但我首先遇到了导航栏问题。切换按钮根本不起作用，单击时不显示任何项目。

我曾在官方文档中搜索过解决方案，但没有帮助。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Document</title>
</head>

<body>
    <div class="container bg-dark">
        <nav class="navbar navbar-expand-sm">
            <a href="#" class="navbar-brand">Brand</a>
            <button
                class="navbar-toggler"
                type = "button"
                data-bs-toggle="collapse"
                data-bs-target="#menuItems"
                aria-controls="menuItems"
                aria-expanded="false"
                aria-label="Toggle Navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item">
                        <a href="#" class="nav-link">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div> …

Run Code Online (Sandbox Code Playgroud)

css navbar twitter-bootstrap bootstrap-5

use*_*523

lucky-day

2
推荐指数

1
解决办法

7696
查看次数

单击时将活动类添加到导航栏元素

我是用导航栏创建的，我没有做过太多的网络开发。

<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-center">
      <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li>
      <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li>
      <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li>
      <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li>
    </ul>
  </div>
</nav>

Run Code Online (Sandbox Code Playgroud)

该导航栏链接到所有其他页面的顶部，以减少代码的重复。有人可以帮助我编写代码，以便当单击菜单项时“活动”类被添加到 li 元素中。然后这会触发 css。

CSS：

.nav-link.active {
  color: white;
}

Run Code Online (Sandbox Code Playgroud)

谢谢

html javascript css html-lists navbar

Mat*_* MC

lucky-day

2
推荐指数

1
解决办法

3万
查看次数

如何将导航栏项目与顺风中的右角对齐

<div class="flex md:flex md:flex-grow flex-row-reverse space-x-1">
  <a href="" class="py-4 px-2 text-teal-500 border-b-4 border-teal-300 font-semibold">Home</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Services</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">About</a>
  <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-teal-300 transition duration-300">Contact Us</a>
</div>

Run Code Online (Sandbox Code Playgroud)

需要做出哪些改变？

items alignment navbar tailwind-css

She*_*ali

2022 09-28

2
推荐指数

1
解决办法

2万
查看次数

Next.js 应用程序中的 Tailwind 和 DaisyUI，我无法让导航栏延伸到整个网页

我有一个 next.js 应用程序，它使用 DaisyUI，它是一个基于 tailwind 的 css 组件库。问题是我无法让任何 DaisyUI 导航栏在整个网页上水平延伸。导航栏组件垂直堆积在页面左侧。
\n

这就是它应该看起来的样子
\n

因此，我将 DaisyUI 示例中的 JSX 代码复制到我的 next.js 应用程序的布局中，但正如您从第一张图片中看到的那样，它不起作用。

这是我的应用程序中的相关代码：“_app.tsx”

import \'../styles/globals.css\'\nimport type { AppProps } from \'next/app\'\nimport Layout from \'../components/Layout\'\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n  return (\n    <Layout>\n      <Component {...pageProps} />\n    </Layout>\n  )\n}\n\nexport default MyApp\n

Run Code Online (Sandbox Code Playgroud)\n

“索引.tsx”

import type { NextPage } from \'next\'\nimport { useState } from \'react\'\nimport styles from \'../styles/Home.module.css\'\n\nconst Home: NextPage = () => {\n  return (\n    <div className="hero …

Run Code Online (Sandbox Code Playgroud)

navbar flexbox next.js tailwind-css daisyui

Chr*_*nor

2022 10-20

2
推荐指数

1
解决办法

2774
查看次数

如何使用 tailwindcss 使反应中的标题仅在滚动时有阴影？

我有一个反应标题，我希望当滚动条位置初始（0）时没有阴影，并且在滚动时有阴影。以下是使用 tailwindCSS 的带阴影和不带阴影的标头代码：

有阴影：

<header className="sticky left-0 top-0 right-0 z-20 shadow">
...
</header>

Run Code Online (Sandbox Code Playgroud)

没有阴影：

<header className="sticky left-0 top-0 right-0 z-20">
...
</header>

Run Code Online (Sandbox Code Playgroud)

如何检查滚动条是否不在其初始位置以使标题采用 className“shadow”？

scroll header navbar reactjs tailwind-css

Kev*_*our

lucky-day

2
推荐指数

1
解决办法

2546
查看次数

Bslib 仅更改导航栏颜色

在我闪亮的应用程序中，我有一个允许更改主题应用程序的选项。
有没有办法创建一个主题，其中只有导航栏是彩色的，而主体是黑色或白色的？
我知道可以使用 CSS 来完成此操作，但由于我可以更改应用程序中的主题，因此无法进行自定义修复。

library(shiny)
library(markdown)
library(bslib)

main_theme = bslib::bs_theme(
  bg = "#86cecb",
  fg = "#e12885",
  primary = "#89cff0",
)

ui = navbarPage(
  "Navbar!",
  theme = main_theme,
  tabPanel("Plot",
           sidebarLayout(
             sidebarPanel(radioButtons(
               "plotType", "Plot type",
               c("Scatter" = "p", "Line" = "l")
             )),
             mainPanel(plotOutput("plot"))
           )),
  navbarMenu(title = "Ressources",
             tabPanel(
               "Options d'interface",
               selectInput(
                 "theme",
                 "Themes :",
                 c(
                   "Custom" = "custom",
                   "Dark" = "dark",
                   "Light" = "light"
                 )
               )
             ))
)

server = function(input, output, session) {
  light <- bs_theme()
  
  dark <- bslib::bs_theme(
    bg …

Run Code Online (Sandbox Code Playgroud)

r navbar shiny bslib

nim*_*iug

lucky-day

2
推荐指数

1
解决办法

594
查看次数