bootstrap-4 - 将导航栏居中:Bootstrap 4
问题描述
我试图将我的导航栏中的项目居中,但无论我做什么,这些项目都粘在左边。在某一时刻,我可以通过在 ml-auto、mx-auto 和 mr-auto 之间切换,让它们都向右或向左移动半英寸。现在,即使我这样做,也没有任何动作。我不确定我做了什么。
我已经尝试了其他帖子中的几个代码示例,但它们都不起作用。我对代码比较陌生,所以我不确定有什么问题。
iv'e 尝试将 d-flex justify-content-center 添加到 navbar-collapse,将内容对齐到 div“collapse navbar-collapse”的中心,以及其他帖子中建议的其他一些内容。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo3.png" style="width:13%;" ;></a>
<button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex justify-content-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">home</a>
</li>
</ul>
</div>
</div>
</nav>
据我所知,我的 CSS 目前没有针对导航的内容。
我只想要导航栏中间的导航项目。
解决方案
从标签中删除ml-auto
CSS 类。ul
在CSS中添加这个
.navbar-brand {
position: absolute !important;
}
推荐阅读
- c# - 在 Windows 应用程序表单中显示 reCAPTCHA
- c++ - std::this_thread::sleep_for 实现取决于系统时钟
- android - 添加外部库后,AndroidManifest.xml 中的应用程序图标问题
- javascript - 无法在 react.js 的模板字符串中呈现 html 标签
- ios - 如何从消息过滤器扩展中获取数据?
- python - 熊猫 - 自上次交易以来的计数
- css - 避免组件在角度上重叠
- c++ - win 将应用程序 String^ 转换为 int
- python - numpy.random.choice() 无法正常工作
- java - 使用带有未经检查分配的 lambda 的 assertThatThrownBy 时找不到符号