twitter-bootstrap - 导航栏中的中心标题 - 引导程序
问题描述
我有一个响应式导航栏,并希望将标题居中。除了标题“标题”之外,其他任何功能或定位都不需要更改。
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
<a class="navbar-brand d-none d-sm-block" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand mx-auto d-block text-center order-0 order-md-0 w-25">Title</div>
<div class="navbar-collapse collapse dual-nav w-50 order-2 order-md-0" id='navbarSupportedContent'>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<button class="btn btn-success ml-auto mr-2 d-block d-sm-none">Always Show</button>
</nav>
请就此给我建议。
谢谢。
解决方案
Bootstrap 4 导航栏现在使用 flexbox,因此标题可以使用 mx-auto 居中。检查这个答案,更多引导导航栏
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-between">
<a class="navbar-brand d-none d-sm-block order-0 w-50 mr-0" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/" class="navbar-brand mx-auto d-block text-center order-md-1 w-25">title</a>
<div class="navbar-collapse collapse dual-nav order-md-2 w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//codeply.com">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<button class="btn btn-success ml-auto mr-2 d-block d-sm-none">Always Show</button>
</nav>
<br><br>
<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
<div class="container">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" href="#">Website Name</a></li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Rates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
推荐阅读
- python - 在 statsmodels 马赛克图中省略刺
- java - java字符串不可变,但代码没有显示
- android - 使用 Camera2 的相机预览很暗
- webpack - webpack 4 requirejs 2 模块解析失败:意外字符“#”
- mongodb - 如何根据唯一名称从现有集合创建集合,例如:“特征”:/名称/
- c# - 无法从后面的代码将参数值传递给数据源
- java - NoSuchSessionException 会话 ID 为空。调用 quit() 后使用 WebDriver?并行运行 java 测试时
- camera - 同一屏幕上具有不同视口 LIBGDX 的多个阶段
- swift - 使用 SFTP 快速发送 CSV 文件
- ios - 如何在 swift 4 中获取按钮值?