- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有办法在 bootstrap 4 的导航栏中获取另一个图标和可折叠下拉菜单?我需要它位于默认切换图标的左侧。
这是我当前的设置(忽略 if 语句)。我试图将搜索放在其自己的可折叠下拉列表中,在移动设备上有自己的图标,同时在当前下拉列表中仍然有其他导航项。(我现在可以使用默认的 Bootstrap 图标)
试图让我的导航栏看起来类似于 monster.com 的导航栏,所以看看他们的导航栏以供引用。
<div class="container-fluid">
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<a class="navbar-brand" href="/">Company Name</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto mx-auto">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search for job">
<input class="form-control" type="text" placeholder="Location" />
<button class="btn btn-seconday " type="submit">Search</button>
</form>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a href="/post" class="nav-link">Post a Job</a></li>
<li v-if="!user_logged" class="nav-item">
<a href="/signup" class="nav-link"><strong>Sign Up</strong></a>
</li>
<li v-if="user_logged && user_type === 'user'" class="nav-item">
<a href="/profile" class="nav-link"><strong>Profile</strong></a>
</li>
<li v-if="user_logged && user_type === 'company'" class="nav-item">
<a href="/dashboard" class="nav-link"><strong>Employer Dashboard</strong></a>
</li>
<li v-if="!user_logged" class="nav-item">
<a href="/login" class="nav-link"><strong><span class="glyphicon glyphicon-log-in"></span> Login</strong></a>
</li>
<li v-if="user_logged" class="nav-item">
<a href="/logout" class="nav-link"><strong><span class="glyphicon glyphicon-log-out"></span> Logout</strong></a>
</li>
</ul>
</div>
</nav>
</div>
最佳答案
right: 5rem
添加到您的第二个按钮。div
(用于搜索和导航栏链接)。data-target
属性。.navbar-toggler.navbar-toggler-custom {
right: 5rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">
<button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
Search
</button>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<a class="navbar-brand" href="/">Company Name</a>
</div>
<div class="collapse navbar-collapse" id="searchNav">
<ul class="navbar-nav mr-auto mx-auto">
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search for job">
<input class="form-control" type="text" placeholder="Location" />
<button class="btn btn-seconday " type="submit">Search</button>
</form>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-auto ml-auto"><a href="/post" class="nav-link">Post a Job</a>
</li>
<li v-if="!user_logged" class="nav-item">
<a href="/signup" class="nav-link"><strong>Sign Up</strong></a>
</li>
<li v-if="user_logged && user_type === 'user'" class="nav-item">
<a href="/profile" class="nav-link"><strong>Profile</strong></a>
</li>
<li v-if="user_logged && user_type === 'company'" class="nav-item">
<a href="/dashboard" class="nav-link"><strong>Employer Dashboard</strong></a>
</li>
<li v-if="!user_logged" class="nav-item">
<a href="/login" class="nav-link"><strong><span class="glyphicon glyphicon-log-in"></span> Login</strong></a>
</li>
<li v-if="user_logged" class="nav-item">
<a href="/logout" class="nav-link"><strong><span class="glyphicon glyphicon-log-out"></span> Logout</strong></a>
</li>
</ul>
</div>
</nav>
</div>
关于css - Bootstrap 4 : How do I get 2 toggle icons on mobile?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41913328/
我正在开发一个 Android 项目,其中有一个抽屉导航,其中显示了 GroupSection 对象的列表。所有 GroupSection 对象都包含一个部分图标。抽屉图标由 TypedArray 和
$('a[class*=icon-]').append(""); 使用我现在拥有的代码,我可以转动: 进入 但我想将选定的类“icon-edit”附加到跨度类中。因为我想要这样的东西: var
我正在建立一个网站,我希望在视觉上有一排字体很棒的图标看起来具有相同的高度。这也意味着我希望他们都坐在同一基线上。 由于图标的性质是具有不同纵横比的不同形状,当您将具有相同字体大小或 fa-2x(等)
我有两个图标,其中一个图标为 .gif,另一个图标为 .png。所以我想组合这些图标,将动画图标放在另一个图标之上。 此代码适用于静态图标,但在放置动画图标时,它不会打印动画。 public clas
当我在控制台中运行 gatsby develop 时,会出现此错误: ERROR #11331 PLUGIN Invalid plugin options for "gatsby-plugin-ma
在适用于iPhone的iOS 7上,有一个新的应用程序图标大小:120x120。我使用此尺寸来创建iOS 7专用图标。在iOS 6上,它将自动采用“旧” 114x114图标,在iOS 7上,它将采用新
我的简单问题是:是否可以将图标组件内的文本居中,我尝试像 child 一样传递文本,但它不起作用?还有其他解决方案吗?我知道可能的解决方案是使用 position: 'absolute' 但还有其他方
我有这个代码: if(seatE1.getIcon() == particular icon) { // do something } 我不知道在特定图标中写什么。我应该写我想要的图标的路径还
在调用 System.Drawing.Icon.ToBitmap() 创建图像后,是否可以安全地处理原始 Icon? 最佳答案 该方法将 Icon 转换为新的 Bitmap 对象,因此不会有从 Bit
这个图钉图标的名称是什么? 最佳答案 现在 Material Icon 中提供了准确的图标。 图标名称:push_pin 图标网址:https://material.io/resources/icon
数据如下: df % ggplot(aes(label = parts, values = values)) + geom_pictogram(n_rows = 10, aes(color =
我正在为 VSCode 编写扩展。在 WebviewPanel 中,我需要显示来自文件图标主题的文件扩展名图标。是否有从文件图标主题中获取图标的功能? 最佳答案 我也在研究这个。我还没有答案,但到目前
我正在组装一个通用应用程序,并且我的项目中有图标,但是我不断从编译器收到关于Icon.png的警告。 我按照http://developer.apple.com/library/ios/#qa/qa2
我正在组装一个通用应用程序,并且我的项目中有图标,但是我不断从编译器收到有关Icon.png的警告。 我按照http://developer.apple.com/library/ios/#qa/qa2
我下载了“Office 2010 Add-In: Icons Gallery ”,这是一个 docx 文件,其中有两个包含图标的后台选项卡。 如何提取图标或在我的应用程序中使用它们? 最佳答案 我在
我正在开发一个 MacOS 应用程序,该应用程序应显示应用程序图标。对于某些应用程序,它可以工作,对于某些应用程序,它不能。 Notes.app 是我没有获得应用程序图标图像的应用程序。 let ic
我只是在Android Studio中创建了一个模板项目,我没有更改一行代码(DrawerLayout模板项目)。 但是,我发现用于显示导航 fragment 的单击图标始终是向左箭头,即使在代码中它
我正在尝试找出如何使用 xpath 通配符来获取网站图标: $doc = new DOMDocument(); $doc->strictErrorChecking = FALSE; $doc->loa
Mobile Safari对于比传统 16x16 分辨率更高的图标,需要使用以下咒语: 但是,Firefox 需要使用 HTML5 syntax ,例如: 现在,我的期望是可以将它们组合成一行
我目前为动态创建的 QPushButton 使用以下样式表属性 string mystyle = "QPushButton { border: 1px solid #8f8f91; border-
我是一名优秀的程序员,十分优秀!