如何让这个导航栏品牌以导航栏为中心？
[英]How do I get this navbar-brand centered on the navbar?
问题描述
我试图让这个navbar-brand项目以导航栏为中心，但到目前为止没有任何效果。 有人可以帮忙吗？
<!DOCTYPE html>
<html>
<head>
<title>Example page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'a_better_place:home' %}">
A Better Place
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'a_better_place:contact' %}">
Contact
</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
我正在使用引导框架
2 个解决方案
解决方案1
1 2021-03-22 23:00:45
利用row和col class：
<:DOCTYPE html> <html> <head> <title>Example page</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min:css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="col-4"></div> <div class="col-4 text-center"> <a class="navbar-brand" href="{% url 'a_better_place:home' %}"> A Better Place </a> </div> <div class="col-4 collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="{% url 'a_better_place:contact' %}"> Contact </a> </li> </ul> </div> </nav> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> </body> </html>
解决方案2
0 2021-03-23 01:03:27
上面的答案有效，但它只设置向左的边距最好的选择是使用.mx-auto 在水平轴的左侧和右侧设置边距
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border row">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="col-4"></div>
<div class="col-4 text-center">
<a class="navbar-brand" href="#">
A Better Place
</a>
</div>
<div class="col-4 collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Contact
</a>
</li>
</ul>
</div>
</nav>
如何仅基于Python中的cookie在引导导航栏中显示某些项目？
[英]How do I only show certain items in a bootstrap navbar based on cookies in Python?
如果我在导航栏上单击两次同一个按钮，我该如何做一个不会引发 404 错误的动态 url？
[英]How can I do a dynamic url that doesn't raise a 404 error if I click twice on the navbar the same button?
如何在引导破折号绘图导航栏中拆分和对齐按钮？ (dbc 导航栏)
[英]How to split and align buttons in bootstrap dash plotly navbar? (dbc navbar)
我的 cookie-navbar 组合不起作用，即使我没有收到错误
[英]my cookie-navbar combo isn't working, even though I don't get errors
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.