草庐IT

javascript - Bootstrap offcanvas 侧边栏切换任何 Canvas 尺寸

coder 2023-08-06 原文

能否请您解释一下 offcanvas 侧边栏切换的工作原理?

我无法让 sm 的实际侧边栏消失。我可以使按钮可见 (visible-sm),但切换不起作用 - 边栏始终可见。

切换适用于 xs 尺寸,这很好,但我想让它以相同的方式适用于 sm,或与此相关的任何其他尺寸。


部分答案:更改 offcanvas.css 中的 max-width 也会使切换适用于更大的尺寸,在这种情况下为 sm:

@media screen and (max-width: 991px) {
  /* 991px instead of 767px makes toggling work for sm as well */

  .row-offcanvas {
    /* ... */
  }

  /* and so on */
}

但是仍然存在一个问题——当 Canvas 宽度在 780 到 991px 之间时,即使关闭侧边栏,它也是可见的。知道如何解决这个问题吗?

非常感谢

最佳答案

Bootstrap off canvas 示例如何工作?

Bootstrap offcanvas 示例使用网格系统。对于 xs 屏幕,内容跨越 12 列(全屏宽度),侧边栏跨越 6 列(1/2 屏幕宽度)。

通常侧边栏会被推到内容下方。然而在offcanvas.css有一个规则是使用绝对定位将其放置在屏幕外的右上角。

当您按下“切换导航”时,它会将 .row 向左移动屏幕宽度的一半 (50%),从而显示边栏。


为什么在 768px 和 992px 之间的屏幕宽度上显示侧边栏?

您的问题是由 .row 周围的 .container 引起的。对于 768px 以上的视口(viewport),容器具有固定宽度。您可以通过对小屏幕使用 width: auto 来解决这个问题。

@media (max-width: 991px) {
    .container-smooth-sm {
        width: auto;
        max-width: none;
    }
}

更高级的 Canvas 外插件

对于我的元素,这种方法被证明是有限的。为此,我创建了 offcanvas pluginnavmenu零件。该插件还可用于将导航栏显示为小屏幕的 Canvas 菜单。

这里有一些使用 Jasny Bootstrap offcanvas 插件的例子

关于javascript - Bootstrap offcanvas 侧边栏切换任何 Canvas 尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22997510/

有关javascript - Bootstrap offcanvas 侧边栏切换任何 Canvas 尺寸的更多相关文章

  1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  2. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗?此外,仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件?谢谢! 最佳答案 是的,您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题,删除public/index/h

  3. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接,但它没有显示,也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线,我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

  4. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - 如果条件与 &&,是否有任何性能提升 - 2

    如果用户是所有者,我有一个条件来检查说删除和文章。delete_articleifuser.owner?另一种方式是user.owner?&&delete_article选择它有什么好处还是它只是一种写作风格 最佳答案 性能不太可能成为该声明的问题。第一个要好得多-它更容易阅读。您future的自己和其他将开始编写代码的人会为此感谢您。 关于ruby-on-rails-如果条件与&&,是否有任何性能提升,我们在StackOverflow上找到一个类似的问题:

  7. ruby-on-rails - RoR中是否有任何内置方法可以为整数填充零? - 2

    如果我想要“00001”而不是“1”,除了我自己写填零方法之外,有没有内置的方法可以帮助我为整数填零? 最佳答案 puts"%05d"%1#00001参见:String::%,Kernel::sprintf这是正在发生的事情。%左侧的"%05d"是C风格的格式说明符。%右边的变量就是要格式化的东西。格式说明符可以像这样解码:%-格式说明符的开头0-用前导零填充5-长度为5个字符d-被格式化的是一个整数如果你要格式化多个东西,你会把它们放在一个数组中:"%d-%s"%[1,"One"]#=>1-one

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby - 在不添加 "end"的情况下编写 Ruby 的任何方法? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭11年前。Ruby是一种美丽的语言,但有一个我讨厌写很多次的关键词“结束”。有什么方法可以写出简洁的代码而不用每次都写“end”吗?

  10. ruby - 检查一个数组中的任何数字是否小于另一个数组中的某个数字 - 2

    这似乎是一个很常见的问题。遗憾的是我在SO上找不到它。如果这是一个重复的问题;我为此道歉。假设我有两个整数数组A和B:A=[17,3,9,11,11,15,2]B=[1,13]如果数组A的任何元素小于数组B的任何元素,我需要返回true或false。简单的方法是使用2个循环(O(n^2)复杂度)defis_greater?(a,b)retVal=falseb.each{|element|a.each{|value|if(valuetrue我还整理了两个数组中的元素,然后使用单个while循环来确定A中的元素是否小于B中的元素。A.sort!B.sort!defis_greater?(a

随机推荐