移动导航栏引导与左栏图标和右对齐图标
我用的是bootstrap4。我想创建一个类似android的导航栏，在最左边有一个图标条。与导航栏右侧的图像和其他图标完全一致。
我试过应用ml auto、mx auto、mr auto、向右拉等等。没有任何东西能满足我的需要。
MX-汽车是不错的小屏幕。当汉堡菜单在那里的时候，它把纳巴品牌放在中心。然而，我需要一些在常规菜单存在时有效的东西。
我已经尝试了下面，但项目打破不同的手机屏幕大小。
<header class="expo-mobile-header">
<nav class="navbar shadow-sm sticky-top navbar-light bg-light navbar-expand-sm">
<button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0 mr-0 px-0 float-right" style="font-size: 1em;">
<i class="fa fa-bars"></i></button>
<a target="_self" href="#" class="navbar-brand">NavBar</a>
<button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0 float-left" style="font-size: 1em;"><i class="fa fa-trash"></i></button>
<button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0" style="font-size: 1em;"><i class="fas fa-bookmark"></i>
</button>
</nav>
</header>
这是我的密码：
共有1个答案
这将有助于：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"></link>
<link rel="stylesheet" href="style.css"></link>
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-light bg-primary">
<div class="col-4">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="fas fa-bars text-white"></span>
</button>
</div>
<div class="col-4 text-white align-left">Title</div>
<div class="col-1"> </div>
<div class="col-1"><span class="fa fa-search text-white"></span></div>
<div class="col-1"><span class="fa fa-heart text-white"></span></div>
<div class="col-1"><span class="fas fa-ellipsis-v text-white"></span></div>
</nav>
<div class="pos-f-t bg-primary">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-lightp-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">
Toggleable via the navbar brand.
</span>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
见：https://jsfiddle.net/sugandhnikhil/Leatv5b3/享受谢谢
-
如何将导航栏项向右对齐？ 我想在右边登录和注册。但是我尝试的一切似乎都不起作用。
-
本文向大家介绍CSS对齐导航栏，包括了CSS对齐导航栏的使用技巧和注意事项，需要的朋友参考一下 示例 水平对齐的导航（菜单）栏包含一些应该对齐的项目。容器中的第一个（左）项目没有左边距，容器中的最后一个（右）项目没有右边距。项目之间的距离是相等的，与单个项目的宽度无关。 的HTML 的CSS 笔记 的nav，ul并且li标签被选择为他们的“导航（菜单）项的列表”语义。当然也可以使用其他标签。 所述
-
问题内容： 我一直在尝试以下操作，以使导航栏的标题保持对齐： 在文件中： 在文件中： 但我找不到解决问题的方法。我还尝试了以下在此处未显示任何内容的内容： 在文件中： 在文件中： 问题答案： 您可以使用navigationItems titleView添加具有左对齐的UILabel，然后使用自动布局设置其框架，如下所示：
-
ap.hideNavigationBarLoading() 隐藏导航栏加载图标。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">showNavigationB
-
ap.showNavigationBarLoading() 显示导航栏加载图标。 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script> <button class="btn btn-default">showNavigationB
-
本功能是响应大家需求，后期加上的，其实本人在公司项目或者个人项目中是不太使用该功能的。以前那些传统后台框架往往会包含此功能，由于以前的后台项目大部分都是多页面的形式，所以标签栏导航功能还是具有一定意义的，大部分都是基于 iframe 的方式实现的。 但随着时代的发展，现在的后台项目几乎都是 spa(single page web application 单页面开发)，再使用以前的方案来实现标签导航