登录
当前位置： 首页 > 面试题库 >

在Bootstrap 4中创建响应式导航栏边栏“抽屉”吗？

巴洲
2023-03-14
问题内容：

我在网上看到了一些使用其他版本的引导程序的示例，但是它们都改变了CSS太多，这使得学习引导程序更加困难。

我想知道在Bootstrap 4中是否可以使用折叠，叠丸，flexbox之类的工具来完成此任务？

我的Jsfiddle缺少什么：

  1. 反应不正确
  2. 导航栏在粘性类中无法正确滚动
  3. 即使我设置了课程，菜单按钮也不是很粘。
  4. 尽管不需要答案，但背景调光器会很棒

在我的示例中，我无法弄清楚如何插入导航栏，不确定是否需要它才能正确响应。

还不确定将其作为列是否是正确的方法，难道它不适合画布吗？

HTML代码：

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
      <ul class="nav flex-column navbar-dark sticky-top">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
          Lorem...
        </div>
      </div>
    </div>
  </div>
</div>

问题答案：

侧边栏导航可能非常复杂。这就是Bootstrap没有“开箱即用”组件的原因。 补充工具栏有很多注意事项 ：

  • 响应式-根据屏幕宽度设置不同的宽度，可见性或方向？
  • 多级-导航项是否具有子级？这个高度会受到怎样的影响？
  • 可切换-边栏可以通过按钮或“汉堡包”切换吗？
  • 推送与重叠-页面内容是隐藏在侧边栏的后面还是旁边？
  • 左侧还是右侧-页面内容左侧还是右侧的侧边栏是？
  • 固定或固定-侧边栏在页面滚动上的位置如何？
  • 动画样式-向左/向右/向上/向下滑动？是否折叠？

在这种“侧边栏”情况下…而不是col-auto在右列中使用col。这样，当折叠菜单时它将填充宽度

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
       ..
    </div>
    <div class="col">
      <div class="row">
        <div class="col-12">
          <button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
            Menu
          </button>   
        </div>
        <div class="col-12">
           ..
        </div>
      </div>
    </div>
  </div>
</div>

为了使动画更加平滑，必须覆盖Bootstrap的折叠过渡，该过渡通常在高度上起作用

根据赏金要求，我用另外2个示例更新了侧边栏

最低版本

该版本更接近示例，并且具有相同的幻灯片左/右“抽屉”动画。

body {
    height: 100vh;
    overflow-x: hidden;
    padding-top: 56px;
}

.vh-100 {
    min-height: 100vh;
}

.sidebar.collapse.show,
.sidebar.collapse.show + .col {
    transition: .18s ease;
    transform: translate(0,0,0);
    left: 0;
}

.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
    transition: .18s ease;
    transform: translate(-25%,0,0);
    z-index: 1050;
    left: -25%;
}

完整版本 （ 非常 接近：

此侧边栏具有：

  • 固定宽度
  • 自动关闭在小屏幕上 ， 在更广泛的屏幕打开
  • 可以任意宽度打开/关闭
  • 反应灵敏- 在较小宽度上 成为 固定覆盖

完整版确实需要更多CSS，但是其中一些是可选的…

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>

body {

   height: 100vh;

   overflow-x: hidden;

   padding-top: 55px;

}



/* set the sidebar width */

.w-sidebar {

    width: 200px;

    max-width: 200px;

}



.row.collapse {

    margin-left: -200px;

    left: 0;

    transition: margin-left .15s linear;

}



.row.collapse.show {

    margin-left: 0 !important;

}



.row.collapsing {

    margin-left: -200px;

    left: -0.05%;

    transition: all .15s linear;

}



/* optional */

.vh-100 {

    min-height: 100vh;

}



/* optional for overlay sidebar on small screens */

@media (max-width:768px) {



    .row.collapse,

    .row.collapsing {

        margin-left: 0 !important;

        left: 0 !important;

        overflow: visible;

    }



    .row > .sidebar.collapse {

        display: flex !important;

        margin-left: -100% !important;

        transition: all .3s linear;

        position: fixed;

        z-index: 1050;

        max-width: 0;

        min-width: 0;

        flex-basis: auto;

    }



    .row > .sidebar.collapse.show {

        margin-left: 0 !important;

        width: 100%;

        max-width: 100%;

        min-width: initial;

    }



    .row > .sidebar.collapsing {

        display: flex !important;

        margin-left: -10% !important;

        transition: all .2s linear !important;

        position: fixed;

        z-index: 1050;

        min-width: initial;

    }

}

</style>

<div class="container-fluid fixed-top bg-dark py-3">

    <div class="row collapse show no-gutters d-flex h-100 position-relative">

        <div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">

            <!-- spacer col -->

        </div>

        <div class="col px-2 px-md-0">

            <!-- toggler -->

            <a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">

                <i class="fa fa-bars fa-lg"></i>

            </a>

        </div>

    </div>

</div>

<div class="container-fluid px-0 h-100">

    <div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">

        <div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">

            <!-- fixed sidebar -->

            <div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">

                <ul class="nav flex-column">

                    <li class="nav-item">

                        <a class="nav-link active" href="#">Link</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="#">Link</a>

                    </li>

                </ul>

            </div>

        </div>

        <div class="col p-3">

            <h3>Content..</h3>

            <p class="lead">Try this is full-page view to see the animation on larger screens!</p>

            <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. 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!</p>

        </div>

    </div>

</div>



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


 类似资料：
  • Bootstrap4 导航栏

    主要内容：实例,垂直导航栏,实例,居中对齐的导航栏,实例,不同颜色导航栏,实例,品牌/Logo,实例,实例,折叠导航栏,实例,导航栏使用下拉菜单,实例,导航栏的表单与按钮,实例,实例,导航栏文本,实例,固定导航栏,实例,实例导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class="na

  • 导航抽屉在状态栏在牛轧糖？

    我尝试在我的应用程序中构建导航抽屉，导航抽屉在之前版本的牛轧糖中运行良好，但在牛轧糖中，导航抽屉不会出现在状态栏上。我尝试了很多解决方案，但没有在牛轧糖中发挥作用，请帮助！！ 这是我的主要活动。xml文件： 我的styles.xml： 和样式（v21）. xml 这是我当前的导航抽屉，我想放在状态栏上。

  • 如何在同一个应用程序中创建导航抽屉和底部栏

    我正在创建一个应用程序，我想在应用程序中有一个导航抽屉和一个底部栏。 我认为我是在寻找一个好方法，但我可以在导航抽屉中显示它，它不在底部栏的上方，它在后面，所以我怎么做呢？我需要底部栏上方的导航抽屉。 这是我的代码，希望你能帮我，谢谢n.n

  • 操作栏顶部的Android导航抽屉

    我正试图把导航抽屉放在动作栏上，当它像这个应用程序一样向右滑动时：[已删除] 这是我的主要活动布局： 关于stackoverflow的其他一些问题与此类似，但建议所有答案都使用滑动菜单库。但这个应用程序他们仍然使用Android。支持v4.widget。抽屉式布局，他们成功了。不要问我怎么知道他们使用标准的导航抽屉，但我肯定。 非常感谢你的帮助。 这是最终的解决方案：多亏了@Peter Cai，这

  • 右侧导航抽屉操作栏切换

    我已经设置了一个左右两侧的导航抽屉。除了一件事，一切都很好。 我希望我的另一个动作栏项目切换右边的抽屉菜单。正常的左边动作栏切换效果很好。谷歌Android应用程序通知面板是我希望动作模仿的。 下面是我用来设置右侧切换的代码（现在它在单击时强制关闭）： 如果有人知道怎么做，如果你能让我知道就太好了！ 谢谢

  • 将导航抽屉置于状态栏下

    我试图让我的抽屉菜单在状态栏下。我已经广泛阅读了关于ScrimInsetsFrameLayout视图的内容，我试图实现它，但出于某种原因，它不会下沉。 以下是我使用/编写的代码。 XML抽屉布局： ScrimInsetsFrameLayout。爪哇： 最后，这里是我的风格。xml for values-v21： 我已经看了2014年的输入输出应用程序源代码以及这个问题，我不知道有什么不同。 我已经

相关阅读

Fullpage.js固定导航栏-实现定位导航栏在导航抽屉中禁用暗淡如何在抽屉布局（带有导航抽屉菜单）中使用Android导航组件（导航图）？如何使用Twitter引导响应式更改导航栏折叠阈值？SFSafariViewController：隐藏导航栏

相关文章

Bootstrap4 创建一个网页OrientDB创建边5.2.3 Fragment实例精讲——底部导航栏的实现(方法3)5.2.2 Fragment实例精讲——底部导航栏的实现(方法2)5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

相关问答

响应式WordPress导航栏-附加CSSUIKit 3中的响应导航栏？导航抽屉操作栏按钮不工作一个新应用的Android操作栏和导航抽屉Android导航抽屉左边距

相关工具

简单的广告栏自定义状态栏淘宝状态栏效果类似 “花瓣” 主页的抽屉效果竖排Segments以及抽屉效果的界面

相关文档

Spring 手撸专栏响应式 Web 开发精讲让开发自动化系列专栏iOS 的函数响应型编程史上最全设计模式导学
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.