我正在使用导航栏。 我已经看到,导航栏以移动大小或col-xs大小折叠。 但是我想让这个导航器在中小型设备上也崩溃了。 我怎样才能做到这一点。

可以从实际网站查询: https//dl.dropboxusercontent.com/u/86581418/consegna/blog.html

代码:

  <div class="col-md-7 col-sm-12 col-xs-12" style="padding-top: 40px;"> <nav role="navigation" class="navbar navbar-default navbar_top" > <div class="navbar-header" style="margin-top: -70px;"> <button type="button" data-target="#myNavbar" data-toggle="collapse" class="navbar-toggle" style="border-color:#fff;"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar" style="background-color:#fff;"></span> <span class="icon-bar" style="background-color:#fff;"></span> <span class="icon-bar" style="background-color:#fff;"></span> </button> </div> <div id="myNavbar" class="collapse navbar-collapse top_nav"> <nav class="nav_top"> <ul class="nav navbar-nav top_nav_block"> <li ><a href="#">HOME</a></li> <li><a href="gallery.html">GALLERY</a></li> <li class="active"><a href="blog.html">BLOG</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </div> </nav> </div> 

===============>>#1 票数:3

从技术上讲,@ cvrebert的回答是正确的。 但是,您可能不像其他开发人员那样精通LESS 如果是这种情况,您可以添加一个自定义CSS文件,以便在包含bootstrap css文件后包含在<head> 在自定义CSS中,您可以添加其他媒体查询。 还有另一篇描述此问题的stackoverflow文章:在不使用LESS的情况下更改bootstrap navbar collapse breakpoint 该文章的答案将使您接近您想要的。 希望这可以帮助。

===============>>#2 票数:1

阅读文档?

更改折叠的移动导航栏断点

导航栏坍缩成其垂直移动视图时视口比窄@grid-float-breakpoint ,并扩展到其水平非移动视图当视口是至少@grid-float-breakpoint在宽度。 在Less source中调整此变量以控制导航栏折叠/展开的时间。 默认值为768px(最小的“小”或“平板电脑”屏幕)。

  ask by translate from so

未解决问题?本站智能推荐:

1回复

在中小型设备上的轮播中连续显示一项

我使用了引导轮播,可以连续显示3个项目,而且效果很好。 但我只想展示一种用于小型设备(手机或平板电脑)的物品。 谁能帮我吗? 这是我使用的代码
2回复

在中小型设备上,Bootstrap 4导航栏非常薄

我正在将Bootstrap 4与Rails 5配合使用,并试图构建一个折叠的导航栏:折叠和功能工作正常,但是由于某些原因,折叠的导航栏的尺寸确实很小: 当网站上的示例给出: 除了导航栏之外,我的文本大小也小得多。 关于导航栏的大小,我没有任何特殊的CSS,所以我很困惑为什么它明
5回复

如何仅在Bootstrap中折叠的导航栏上显示文本?

我想显示导航栏切换按钮旁边导航栏上显示的电话号码。 只有在导航栏处于折叠状态时才会出现切换按钮。 我希望文本旁边出现。 这就是我现在拥有的: 这就是我想要实现的目标: 来自相关div的HTML: 除非导航栏被折叠,否则我不希望文本出现。 怎么能实现这一目标?
1回复

根据设备调整Bootstrap NavBar的位置

我有一个徽标和导航栏在左侧彼此相邻的布局。 当视口减小时,导航栏将位于徽标下方并向左对齐。 我计划将导航栏保持在右侧,并与徽标垂直对齐(当前导航栏在顶部对齐)。 当视口大小减小时,导航栏应位于徽标下方的左侧。 我正在尝试使用此CSS,但是无法实现我想要的布局 http:/
2回复

创建Bootstrap导航栏折叠叠加菜单

当用户单击汉堡菜单时,我试图获得覆盖菜单,该菜单占据了整个屏幕,类似这样: 由于某种原因,我似乎根本无法使它正常工作,我试图使用示例,但这可能是因为我对引导程序没有经验,但是根本不会覆盖菜单。 因此,我进行了设置,使汉堡菜单使用媒体查询显示为991px,并且工作正常,但根本没有
1回复

小型设备上的Bootstrap 2固定菜单问题

我已经建立了一个基于Bootstrap 2.3.2框架的模板。 在小视图端口上,我已将菜单固定。 问题是,当在iPhone5横向模式或Crappy Android纵向或Crappy Android横向中查看菜单时,只能看到很少的菜单。 用户不能向下滚动到其他菜单,也不能向下滚动以查
2回复

引导程序:设置小型设备的表列宽度

如何为较小的设备设置表格的列宽? 我正在使用boostrap3。 这是我的代码: CSS: 以此,我无法减小Message列的宽度。 我看到了用于较小设备的水平滚动条。 如何设置“消息”列的宽度,使其可见并在较小的设备(不同大小)上包装列数据。 截至目前,较大的设备
2回复

引导程序禁用导航栏上的折叠/可切换[重复]

这个问题已经在这里有了答案: 在引导程序中禁用响应式导航栏4 2个答案 调整窗口大小时,如何使导航栏不折叠/切换? 我尝试添加 给我的CSS。 这样,在调整窗口大小时,导航栏元素最终会堆叠。 我也在使用bootstrap 4 alpha 6 这是
2回复

Bootstrap折叠的导航栏-我希望菜单左对齐,但右对齐

我制作了一个简单的引导导航栏,该导航栏在显示窗口较小时会折叠。 我还在该导航栏中添加了图像。 现在,当我缩小浏览器窗口并显示“汉堡包”菜单时,我的可折叠菜单未与网页的最左侧对齐,请参见下面的图片。 我想将可折叠菜单向左对齐,该怎么办? <link href="
1回复

Bootstrap 3:如何将导航栏折叠按钮水平居中?

我说的是右边的小按钮: http://imageshack.us/scaled/thumb/32/7n9i.png 我尝试了以下CSS选择器,但未成功: