13

我正在使用新更新的 Bootstrap 3 RC1做一个项目。

新的 Bootstrap 3 可能有与之前版本有很大不同的新功能。我想出了大部分的变化，但有一个我无法解决：

当菜单有很多项目时，它会在 Ipad 和其他平板电脑中中断，因为它不会像在移动设备上自动折叠那样折叠（这很好）

我想知道如何“强制”ipads 像移动设备一样显示折叠菜单或更好 - 如果菜单有很多项目并且在某些屏幕上并且更小它会中断，如何折叠菜单

这是我的现场项目的截图：

-- 大屏幕菜单 --

在此处输入图像描述

-- Ipad 横屏菜单 --

在此处输入图像描述

-- Ipad Portrait 上的菜单 --

在此处输入图像描述

-- 手机菜单 --

在此处输入图像描述

我只是想让 ipad 像手机一样工作。请注意，就内容而言，肖像确实像移动设备，但不是菜单。

有什么建议么？谢谢

4

7 回答 7

10

请阅读：http ://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/

菜单的折叠是在 less 文件中定义的。（下载最新版本：https ://github.com/twbs/bootstrap ）

在 variables.less 中，您会发现@grid-float-breakpoint: @screen-tablet;@screen-tablet 的位置是 768px。

因此，默认情况下，当屏幕宽度低于 768px 时，您的菜单会折叠；

ipad 横向屏幕宽度为 1024 像素，因此菜单不会折叠。ipad 纵向屏幕宽度为 768 像素，因此菜单不会折叠。

另请参阅 navbar.less：

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

要更改此行为，您必须将 @grid-float-breakpoint 设置为 767 并重新编译您的 css 文件。

NB 你还提到：“请注意，就内容而言，肖像确实像移动设备，但不是菜单。”

您使用“col-lg- ”作为网格行的前缀。“col-lg- ”元素将在 992px（ipad 纵向）下方堆叠并在 992px（ipad 横向）上方变为水平。

于 2013-08-08T13:07:04.270 回答
9

刚刚也遇到了这个问题。我建议您访问：

引导定制

找到该字段@grid-float-breakpoint并将其设置为屏幕宽度，之后菜单应折叠。在那里，您可以使用上一节中的变量，即 fromMedia queries breakpoints来设置适当的点。

另外，花点时间检查所有可用的变量以进行更改。创建一个定制良好的 Bootstrap 包可能会为您节省数小时的开发时间。工作，如果不是更多。

于 2013-08-28T16:29:05.043 回答
5

对于那些不使用 less 的可怜人，您将不得不修改 bootstrap.css 并将与具有 768 像素断点的导航栏关联的媒体查询更改为 992 像素。

例如，改变

@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}

到：

@media (min-width: 992px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
于 2014-08-24T20:14:05.897 回答
5

我发现的不少实现都不起作用

在任何地方都找不到让这种情况自行发生的样式，最终找到了这个 - https://coderwall.com/p/wpjw4w

于 2014-10-23T20:46:53.333 回答
1

我可以通过将 @media (max-width: 768px) 查询改为 767px 来纠正我们的问题。上面的链接之一引用了 iPad 上的 1px 问题，该问题以不同的方式中断，而是强制使用网站的移动版本。

于 2014-12-22T21:39:10.073 回答
0

如果有人使用标准的 bootstrap.css 文件，我必须在 3 个地方进行更改：

3780线附近

/*changed from 768 to 992 */
    @media (min-width: 992px) {
     .navbar-header {
      float: left;
     }
   }

3799线附近

 /* changed from 768 to 992 */
    @media (min-width: 992px) {

3924线附近

/*changed from 768 to 992 */
@media (min-width: 992px) {

我希望这可以帮助别人 ：）

于 2014-08-26T09:14:35.250 回答
0

我遇到了相反的问题。在 iPad 上，导航栏没有折叠（如预期的那样），但应用了折叠导航栏的样式。我通过更改折叠导航栏添加的媒体查询来解决它-1，$grid-float-breakpoint如下所示：

@media (max-width: $screen-sm-min - 1) {
//styles for collapsed navbar (which won't show up on iPad portrait)
}
于 2015-10-11T21:45:52.400 回答