gpt4 book ai didi

html - 如何为较小的屏幕自动折叠 Bootstrap 4 边栏?

转载 作者:行者123 更新时间:2023-11-28 00:41:57 35 4
gpt4 key购买 nike

这是我当前的代码,我已经设法用折叠按钮隐藏侧边栏,但我希望它只在小型设备上折叠,就像引导导航栏那样。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 px-1 bg-light" id="sidebar">
<div class="py-2 sticky-top flex-grow-1">
<div class="nav flex-sm-column">
<h2 class="text-center">PROFILE</h2>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse" aria-expanded="true" aria-controls="collapse">Toggle both elements</button>
<div class="collapse navbar-collapse">
<a href="" class="nav-link">LINK</a>
<a href="" class="nav-link">LINK</a>
<a href="" class="nav-link">LINK</a>
</div>

</div>
</div>
</div>
<div class="col-sm-9" id="main">

***PAGE DATA


</div>
</div>
</div>
</div>

最佳答案

这就是您要找的。其他人在上面写的内容会起作用,但它比仅使用 Bootstrap 类更难。

https://getbootstrap.com/docs/4.1/utilities/display/

关于html - 如何为较小的屏幕自动折叠 Bootstrap 4 边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53769330/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com