css - 如何在 Bootstrap 4 中居中导航栏链接
问题描述
我有一个导航栏,我想将链接放在里面。我试过添加 mx-auto 和 text-center。没有任何工作。我的代码如下?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
<div class="container text-center">
<a class="navbar-brand text-center" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案
将 mx-auto 放在 ul 中,它将使链接居中
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-center">
...
<ul class="navbar-nav ml-auto mx-auto">
...
</ul>
</div>
</div>
</nav>
这是带有您的示例的代码笔
推荐阅读
- ssl - 无法验证在 https://api.paypal.com 上找到的证书
- javascript - 如何从网页中读取文本文件?
- python - 无法 pip 安装 mysqlclient 并执行“gcc”:权限被拒绝
- javascript - 比较数组中的多个对象并在某个公共值时求和,JavaScript / Vue.js
- spring - 如何返回带有错误响应的 Http 状态行?
- java - 试图理解Java中结合布尔和逻辑运算符的代码块
- python - Django:如何从基本模型类的实例中填充继承的表单字段?
- c++ - 如何创建多个视口,每个视口都有不同的场景?
- javascript - 如何在 Jest 测试中真正调用 fetch
- c# - 如何绑定列表
动态属性