css - 如何在引导程序 3.3.7 中将导航栏切换到品牌左侧
问题描述
到目前为止,我有以下模板:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Welcome</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class='navbar-header'>
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
<a class='navbar-brand' href=""><img src="images/Evaluate_Pharma_Logo_220.png" /></a>
</div>
<div class="clear-fix"></div>
<div class="navbar-collapse collapse">
<ul class='nav navbar-nav'>
<li>
<a href="">
<input type="text" /><span class="fa fa-search big"> </span> SEARCH
</a>
</li>
<li>
<a href="">
<span class=""></span>BROWSE DATA
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
CREATE REPORT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="" rel="Company & Country Profiles">Company & Country Profiles</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
PEER GROUPS
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
YOUR EVALUATION
<span class="caret"></span>
</a>
<ul class="dropdown-menu"></ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
当我运行它时,我按预期获得了我的菜单,但是当我减小页面的宽度时,我的导航栏切换按钮类出现在 navbar-brand 的右侧。我需要这个在这个左边,我怎样才能做到这一点?这只是外壳,我知道我需要填写我的 href 和其他内容
解决方案
bootstrap 将其正确浮动,因此您可以使用以下命令覆盖它:
.navbar-toggle {
float: left !important;
}
注意:使用“!important”不是最佳实践,因此或者将新的 id 选择器添加到与 .navbar-toggle 相同的按钮元素,并添加相同的属性和值。
推荐阅读
- react-native - 如何在导航 5 中制作自定义标题栏?
- php - 删除 myaccount 页面中的 WooCommerce noindex 元数据
- c - 分配 struct file_operations 字段时从不兼容的指针类型初始化
- c - 将C中文件中的每个单词都大写
- xpath - xpath:如果类别是类型,我怎么能得到然后得到别墅
- pandas - 2个时间序列数据帧之间的相关性
- react-native - 无法读取未定义 [React Native] 的属性“getUserMedia”
- angular - 如何将 Firestore 数据映射到 Ionic / Angular 应用程序中的打字稿界面?
- prismjs - 如何正确地将 PrismJS 集成到 Eleventy 项目中?
- python - Tkinter Bugs wrt 向菜单栏添加多个按钮