如何创建像下面(链接)站点这样的导航条？
如何创建像下面(链接)站点这样的导航条？
提问于 2018-08-01 07:03:53
目前，我正在升级我的旧的php min-project前端从零开始，并重新设计它，我想设计我的肚脐像下面的网站(链接)。
回答 1
Stack Overflow用户
发布于 2018-08-01 16:32:57
下面是如何使用相当标准的Bootstrap 4组件和类执行类似操作的示例：
<div class="container">
<div class="text-center m-5">
<div class="h1">Lorem Ipsum</div>
<p class="lead text-muted">Lorem ipsum dolor sit imet</p>
</div>
<ul class="nav nav-pills nav-fill justify-content-center mb-5">
<li class="nav-item">
<a class="nav-link bg-secondary text-white rounded-0" href="#link1">Link 1</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link bg-secondary text-white rounded-0" href="#link2">Link 2</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link bg-secondary text-white rounded-0" href="#">Link 3</a>
</li>
</ul>
<div class="card w-100 rounded-0 mb-3" id="link1">
<div class="card-body">
<h5 class="card-title">Link 1</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
<div class="card w-100 rounded-0" id="link2">
<div class="card-body">
<h5 class="card-title">Link 2</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001840
复制相关文章
相似问题