带左栏图标和右对齐图标的移动NavBar引导程序 [英] Mobile NavBar Bootstrap with left bar icon and right aligned icons
问题描述
我正在使用Bootstrap4.我想创建一个类似navbar的android，其中带有图标栏的项目位于最左侧.完全按照图片导航栏右侧的其他图标.
I'm using Bootstrap 4. I'd like to create a android like navbar with bar icon item to be on the far left. exactly as per the image And other icons on the right side of the navbar.
我尝试应用ml-auto，mx-auto，mr-auto，向右拉动等.我什么都没做.
I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.
mx-auto非常适合小屏幕.汉堡菜单出现时，它会将导航栏品牌置于中心位置.但是，当需要常规菜单时，我需要一些能起作用的东西.
mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.
我在下面尝试过，但是这些项目在不同的手机屏幕尺寸上无法显示.
What i have tried is below but the items break on different phone screen sizes.
<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>
这是我的代码:
推荐答案
这可以做到:
<!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/享受！！！谢谢
see:https://jsfiddle.net/sugandhnikhil/Leatv5b3/ Enjoy!!! Thanks
这篇关于带左栏图标和右对齐图标的移动NavBar引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
