通过 Bootstrap 更改导航栏中切换按钮的 position
[英]Changing the position of toggle button in navbar made through Bootstrap
问题描述
I have made a navigation bar using Bootstrap.
我使用 Bootstrap 制作了一个导航栏。 Here the toggle button of the navigation bar is always aligned to the right side of the navigation bar.此处导航栏的切换按钮始终与导航栏的右侧对齐。 My question is that why is it aligned to its right?我的问题是为什么它与它的权利对齐？ What makes the toggle button remain in the right of the navigation bar.是什么让切换按钮保留在导航栏的右侧。 Neither do we have ml-auto class for the button, nor we have an element that is between the brand and button which is of auto length.我们也没有用于按钮的 ml-auto class，也没有位于品牌和按钮之间的自动长度元素。 So which property of what class is being applied on this button to make it right aligned with respect to navigation bar?那么 class 的哪个属性应用于此按钮以使其相对于导航栏右对齐？
On removing ml-auto class from ul tag the toggle button is still aligned to the right hand side of the navigation bar.从 ul 标签中删除 ml-auto class 时，切换按钮仍与导航栏的右侧对齐。
Just tell me about the property and the class which is responsible for this.请告诉我有关财产和负责此的 class 的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Installation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="style1.css">
</head>
<body>
<!-- <div class="green blue text-white">Hey</div> -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">NavBar</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">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
3 个解决方案
解决方案1
0 2020-12-24 18:04:31
Class .navbar has properties, that align button to the right: Class .navbar具有将按钮向右对齐的属性：
display: flex;
justify-content: space-between;
space-between cause elements to have equal space between them. space-between使元素之间具有相等的空间。 There are only two elements inside .navbar so there is one space aligning button to the right. .navbar内只有两个元素，因此右侧有一个空间对齐按钮。
More info: https://www.w3schools.com/cssref/css3_pr_justify-content.asp更多信息： https://www.w3schools.com/cssref/css3_pr_justify-content.asp
解决方案2
0 2020-12-24 18:20:01
Bootstrap from its version-4 started making use of flexbox .从其版本 4 开始的引导程序开始使用flexbox 。 And lots of bootstrap components make use of flexbox properties.并且许多引导组件利用 flexbox 属性。
navbar is one such component. navbar就是这样一个组件。 navbar has display:flex;导航栏有display:flex; and justify-content:space-between CSS applied by default and this changes on large screens.和justify-content:space-between CSS 默认应用，这在大屏幕上会发生变化。 That's why Toggle button stays on the right side on smaller screens.这就是为什么切换按钮在较小的屏幕上保持在右侧的原因。
On large screen, when there is no toggle button.在大屏幕上，当没有切换按钮时。 the property changes and becomes justify-content:flex-start .属性更改并变为justify-content:flex-start 。
Image from Bootstrap Website:来自 Bootstrap 网站的图片：
解决方案3
0 2021-01-05 17:02:28
"navbar-brand" is the data-attribute causing your toggler being displayed on the right side. "navbar-brand"是导致您的切换器显示在右侧的数据属性。 The placement of this attribute inside your HTML is controlling the placement of the toggler on your page.此属性在HTML中的位置控制着切换器在页面上的位置。
This is the explanation from Bootstraps official documentation:这是来自Bootstraps 官方文档的解释：
Navbar togglers are left-aligned by default, but should they follow a sibling element like a.navbar-brand, they'll automatically be aligned to the far right.
So instead, put your toggler class first and navbar-brand class after it to display the togglder to the left side.因此，请先将切换器toggler放在首位，然后将navbar-brand class放在其后，以将切换器显示到左侧。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.