html - Bootstrap 4 - 侧边栏到顶部导航栏
问题描述
所以我经历了这个话题: Bootstrap 4:响应式侧边栏菜单到顶部导航栏 https://www.codeply.com/go/kTmpqn61nq
从解决方案中我决定使用替代版本。HTML 代码如下:
<div class="container-fluid">
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
<aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="col bg-faded py-3">
<h2>Main</h2>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</main>
</div>
</div>
但我想要实现的是向所有屏幕宽度最大为 768px 的移动设备显示典型的“移动”导航栏。目前,仅对典型的移动设备 = 手机启用水平“下拉”导航栏。
我认为改变这一行:
<aside class="col-12 col-sm-3 p-0 flex-shrink-1">
进入这个:
<aside class="col-12 col-sm-12 p-0 flex-shrink-1">
会有所帮助。但事实并非如此。事实上,它破坏了布局(导航栏没有显示在移动设备上;菜单保持常规的 UL LI 列表)。它甚至可行吗?
解决方案
您必须更改 HTML 中以下元素的类才能达到预期效果。首先更改flex-sm-row
为flex-md-row
<div class="row wrapper min-vh-100 flex-column flex-sm-row">
至
<div class="row wrapper min-vh-100 flex-column flex-md-row">
也col-sm-3
改成col-md-3
<aside class="col-12 col-sm-3 p-0 bg-dark flex-shrink-1">
至
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
最后更改navbar-expand-sm
为navbar-expand-md
和flex-sm-column
flex-md-column
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
至
<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row wrapper min-vh-100 flex-column flex-md-row">
<aside class="col-12 col-md-3 p-0 bg-dark flex-shrink-1">
<nav class="navbar navbar-expand-md navbar-dark bg-dark align-items-start flex-md-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href="javascript:void(0);" class="navbar-toggler" data-toggle="collapse" data-target="#sidebarID">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar" id="sidebarID">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="col bg-faded py-3">
<h2>Main</h2>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby
chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
<p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade
disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache
food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
</main>
</div>
</div>
此更改的基本公式是将所有sm类更改为md类,以从 786px(在 md 视图中)而不是 576px(在 sm 视图中)获得所需的效果。
查看我更新的小提琴
推荐阅读
- c++ - 如何在 Arduino-ESP8266 上从 C/C++ 中的字符串解析 time_t?
- android - Ionic 始终允许定位 API 级别 29
- react-native - 实时相机滤镜
- azure-active-directory - 我正在尝试使用 web api 在 azure b2c 中读/写用户,但我获得的权限不足
- android - Android Webview:无需重新加载网页即可导航
- java - (Java) 使用 for 循环创建数组列表的排列
- android - 在回收器适配器中设置 clicklistener 以从 firebase 下载视频
- python - 使用 pythonSDK 停止 OpenStack 服务器实例
- javascript - 在返回函数上使用 mixin 函数,而不是函数的值
- sql-server - 如何在 Python 中使用 varbinary 解析原生格式的 BCP 输出文件