twitter-bootstrap - 调整大小时将侧导航栏变成顶部栏
问题描述
大家好,我有一个网站可以解释我要完成的工作,任何帮助找到一个好的教程将不胜感激。
如果你去这里调整页面大小,你会看到侧边栏变成顶部栏。我怎样才能做到这一点?
http://portlanddecorating.co.uk/
我还没有找到任何教程。任何帮助将不胜感激。
解决方案
而且因为视觉示例胜于雄辩...
这是创建垂直导航栏的一种方法。注意媒体查询需要根据navbar-expand-<size>
导航栏标签中使用的类进行调整<nav class="navbar navbar-expand-sm ...
有关更多信息,请参阅Bootstrap 4 响应式中断
@media only screen and (min-width: 576px) {
.vertiNav {
width: 100px;
}
.vertiNav nav.navbar {
flex-direction: column !important;
}
}
@media only screen and (max-width: 576px) {
.vertiNav {
width: 100%;
}
.vertiNav nav.navbar {
flex-direction: row !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div class="vertiNav">
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav flex-column">
<a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
推荐阅读
- python - 根据列选择熊猫数据框中的数据
- php - 在 WooCommerce 中向 WC_Order 添加自定义函数
- regex - 正则表达式排除多个 IP
- javascript - 如何从对象中获取值?
- python - 将 raw_input 中的单词与想要的字符串进行比较
- c# - 在 C# 中将 .mjpeg 文件的十六进制数据保存为 .mjpeg 格式的文件
- android - Android Studio如何使用osmdroid和mbtiles显示离线地图
- python - 从python3中的列表中删除元素时获得不同的输出
- ios - 像在 Lenskart 中一样在 iOS 中通过自拍创建 3D 模型?
- java - 如何在android中更改屏幕底部软导航背景和图标颜色?