- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
JS fiddle 链接
https://jsfiddle.net/9dumrg8v/1/
我有几个想要实现的目标:
<强>1。将可折叠栏和图像保持在同一行
当它调整到较小的窗口时,我想将它“锁定”在一条线上:
图像和可折叠栏是分开的,因为我没有在下拉列表中包含图像
<a class="navbar-brand" href="main">
<img src="img/logo_header.png" class="img-responsive img-header" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
<强>2。在可折叠导航栏中包含底部的链接
让列表(一到六)在出现时与导航栏一起出现,目前它们是分开的。
此外,如果我尝试将它添加到 <div class="collapse navbar-collapse" id="navbarSupportedContent">
中, 它被包含在同一行中并破坏了设计。
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="mwc-orange-nav">
<div class="container">
<div class="row px-4">
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
One</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Two</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Three</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Four</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Five</a>
</div>
<div class="col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="" class="menu-header">
Six</a>
</div>
</div>
</div>
</div>
如有任何帮助,我们将不胜感激。
最佳答案
请尝试此代码。我们稍微改变了结构。
.navbar.navbar-expand-md.navbar-light { padding: 0; flex-direction: column; -webkit-flex-direction: column; }
.menu-top .login-btn { padding: 0 10px;}
.navbar-expand-md > .container > div { width: 100%; }
.menu-top { display: flex; display:-webkit-flex; align-items: center; -webkit-align-items: center;}
.navbar-expand-md .navbar-collapse { width:100%;}
.menu-box {
padding: 0px 45px;
}
.menu-box a {
color: white !important;
}
.menu-box:hover {
background-color: white;
}
.menu-box:hover a {
color: #f08400 !important;
text-decoration: none;
}
.mwc-orange-nav {
background-color: rgb(240,132,0, 0.8);
}
.bg-blue{
background: #00a6a6 !important;
border-color: #00a6a6 !important;
}
.curve-right {
border-top-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.fa-search {
color:
#fff !important;
}
.header-font {
font-size: 18px;
color: #00a6a6;
}
.header-font:hover {
text-decoration: none;
color: #007070;
}
.header-box {
box-sizing: content-box;
padding: 5px 25px;
border-radius: 10px;
border: 2px solid #00a6a6;
color: #00a6a6;
}
.header-box:hover {
text-decoration: none;
color: white;
background-color: #00a6a6;
}
@media(max-width:767px){
.menu-top { padding: 0 10px; display: block; }
.menu-box { flex-basis: auto; -webkit-flex-basis: auto; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="nav-header"> <!-- start header -->
<nav class="navbar navbar-expand-md navbar-light">
<div class="container pt-3">
<div class="menu-top">
<a class="navbar-brand" href="main">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="img-fluid" width="200">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form action="cards/search.php" method="POST" class="d-inline w-50 mx-auto">
<div class="input-group">
<input type="text" name="text-search" id="searchBox" class="form-control search-bar" aria-label="Default" aria-describedby="inputGroup-sizing-default" placeholder="Search" required>
<div class="input-group-prepend">
<button type="submit" name="submit-search" class="input-group-text bg-blue curve-right"> <i class="fas fa-search"></i> </button>
</div>
</div>
<div id="response" class="scrollbar-design search-content"></div>
</form>
<div class="row login-btn">
<div class="col-md-6 mb-2 mt-2">
<a href="cards/index.php" class="header-font">Login</a>
</div>
<div class="col-md-6 mb-2 mt-2">
<a href="cards/register.php" class="header-box">Register</a>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse mwc-orange-nav" id="navbarSupportedContent">
<div class="container">
<ul class="navbar-nav row px-4">
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2 active">
<a href="cards/list-new.php" class=" nav-link menu-header">
One</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=beauty" class="nav-link menu-header">
Two</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=health" class="nav-link menu-header">
Three</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list.php?tn=wellness" class="nav-link menu-header">
Four</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="cards/list-partners.php" class="nav-link menu-header">
Five</a>
</li>
<li class="nav-item col text-center dropdown menu-holder menu-box pb-2 pt-2">
<a href="articles" class="nav-link menu-header">
Six</a>
</li>
</ul>
</div>
</div>
</nav>
</div><!-- end header-->
关于html - 可折叠导航栏上的 Bootstrap 标题调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58811709/
我正在尝试创建一个无序列表,其中每个 包含另一个无序列表。我想要触发子菜单向下滑动的列表项有类 mobile-collapse子菜单有类 mobile-drop-menu 。这是我的 jquery 代
我使用 PMD检查我的代码。在大多数情况下,它给了我非常有用的提示,但我无法弄清楚在以下情况下可以改进什么。 原始代码如下所示: if ((getSomething() != null && getS
需要一些 jquery/js/jsp 功能的帮助.. 我有一个可折叠的表格脚本: (function($){ $.fn.extend({ setupCollapstable: funct
我使用 CSS 和 Javascript 创建了一个 Accordion ,但我不知道如何在选择不同的 Accordion 后折叠打开的 Accordion 。我试过在 Javascript 中使用可
我使用 CSS 和 JS 编写了一个可折叠按钮,我想将一个按钮嵌套在另一个按钮中。 是否可以动态调整第一个/外部按钮的高度,以便在打开第二个/内部按钮时,第一个按钮的高度增加第二个按钮的高度? 这是我
我正在使用 jQuery 创建一个导航系统。我想要实现的是在页面加载时显示父元素并隐藏子元素。我做得非常简单。 然而,当我在其他父元素之间切换时,我希望能够隐藏之前的子元素,以便我只能打开一个 一次。
我正在尝试匹配这个设计 点击卡片应该展开 我不能用卡片包裹扩展 block ,因为扩展 block 基本上只有一行,我试着按照这个例子 flutter_catalog 我在谷歌上搜索了很多,但找不到我
我正在尝试切换 div 以使其可见/隐藏。我正在制作一个排行榜,我想打开它,但只能在单击时打开。 test fu
我正在使用 Materialize CSS 并使用可折叠的 Accordion 式元素 ( http://materializecss.com/collapsible.html )。 出于某种原因,当
我有一个递归 TreeView ,它从数据库中提取所有信息,并且想了解如何使其可折叠。我尝试使用 Jquery 和 Javascript,但都没有任何效果。不确定是我的错误还是其他原因。 这是我的基本
我收到异常“可折叠 if 语句”。 通过以下代码中的 Sonar 。 if(getSomething().equals(getSomething()){ if(getsomehing.contai
我正在制作 Accordion 以在 Angular 应用程序中使用 javascript 制作可折叠的 div.. 为此,如果单击Parent One 或任何其他父名称上的按钮未打开它.. HTML
我正在将 Ant Design 与 React 一起使用。 Ant Design 有一个菜单组件:https://ant.design/components/menu/ 是否可以使菜单不可折叠/展开?
我想展示这个可折叠 Accordion 的第一个元素。我在互联网上做了一些研究,但徒劳无功 Aller au dossier personnel
考虑以下 foldMap 的签名 foldMap :: (Foldable t, Monoid m) => (a -> m) -> t a -> m 这与“绑定(bind)”非常相似,只是交换了参数:
使用“fieldsets”,您可以通过指定 CSS 类“collapse”使其可折叠。如何对“内联”做同样的事情?谢谢! 最佳答案 在 Django 1.10+ 中: class MyModelInl
有人已经用 YUI dataTable 制作了如下示例的脚本吗? 示例: http://extjs.com/deploy/dev/examples/tree/column-tree.html http
好吧,有些事情很奇怪,我无法弄清楚。假设我有一些类别,每个类别都有一些项目,全部放入字典中。 import wx nyoom = {} nyoom['spiders'] = ['Yellow Sac'
我正在尝试实现一种可折叠的 StackLayout。每次用户单击按钮时,它都会展开或折叠堆栈布局以显示/隐藏更多详细信息。 我能够通过下面的代码实现更多/更少的效果,但它看起来不对而且效果也不是很好,
我的布局包含顶部的水平 recyclerView 和 viewPager。 ViewPager 在其每个选项卡中都有一个 recyclerView。 我想在用户滚动布局时折叠顶部水平回收器 View
我是一名优秀的程序员,十分优秀!