从768px显示CSS媒体查询倒塌防止菜单(Prevent menu from collapsing

2019-06-23 12:20发布

我试图做使用Twitter的引导网站。 我有相对较少的菜单,所以它的768px显示中一种适合也。 但是,在默认情况下引导,菜单塌陷使用媒体查询。 我无法阻止这种行为。

这是我的HTML

<div class="row">
    <div class="span3 logo"><h1><img src="img/logo.png" /></h1></div>
    <div class="span9">

        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
         <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
              <div class="nav-collapse">
                <ul class="nav nav-pills">
                  <li><a href="#">Home</a> </li>
                  <li><a href="#">Services</a> </li>
                  <li><a href="#">Portfolio</a> </li>
                  <li><a href="#">Contact Us</a> </li>
                </ul>
              </div>
            </div>
          </div>
        </div>



    </div>
    </div>

我知道它是与在引导媒体查询,但无法理解。

Answer 1:

你会想读出部分: 使用媒体查询在引导网站: http://getbootstrap.com/2.3.2/scaffolding.html#responsive (引导2.3.2) http://getbootstrap.com/越来越-开始/#禁止响应 (引导3)

您将要使用相关媒体查询重写风格引导当你的视口收缩补充道。

  // Landscape phones and down
  @media (max-width: 480px) { ... }

  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }

  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Large desktop
  @media (min-width: 1200px) { .. }

如果你不想让导航栏崩溃,从类中删除名称“崩溃”。 你应该改掉:

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

总之,看看在文档,还有覆盖这个确切的事情一节题为“可选响应变化”在这里: http://getbootstrap.com/2.3.2/components.html#navbar (引导2.3.2)



Answer 2:

您可以自定义Twitter的引导CSS从萨斯- Twitter的引导SCSS文件, 编译它,并设置$navbarCollapseWidth_variables.scss到你想要的值...

编辑

作为@Accipheran在评论中指出,为引导3.x中,你应该设置变量的名称是$grid-float-breakpoint



Answer 3:

这个工作很适合我:

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}   


Answer 4:

阅读的答案,我相信你是在谈论引导版本2.也许有人寻找一个答案自举3将到达这里。 这个答案就是你!

  1. 转到自引导的定制页面
  2. 重新定义为硬编码东西@网格浮子断点值(例如520px)或更小的屏幕尺寸等@屏幕-XS-分钟
  3. 按下按钮,页面底部的重新编译的css文件
  4. 从下载的zip文件的那些代替你bootstrap.css和引导-min.css文件。


Answer 5:

找到变量:

@电网浮动断点

它被设置为@屏幕-SM,你可以根据你的需要改变它。

如果忽略供应商较少文件,设置变量为0px,例如:

@网格浮子断点:0像素;



Answer 6:

如果你想要做的是没有导航崩溃,直到达到一个较小的值,最简单的方法是将头部到Twitter的引导定制页面 ,改变@navbarCollapseWidth到你想要的值,并下载软件包。 完成。

如果你想定制超出了这个页面允许,你就必须重写或在其他答案中描述定制。



Answer 7:

这个例子是从官方网站: http://getbootstrap.com/examples/non-responsive/

这些变化是在非responsive.css但有关的重要组成部分.navbar是:

body {
    padding-top: 70px;
    padding-bottom: 30px;
}
.page-header {
    margin-bottom: 30px;
}
.page-header .lead {
    margin-bottom: 10px;
}
.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left;
    margin: 0;
}
.navbar-nav > li {
    float: left;
}


Answer 8:

如果你想完全禁用崩溃导航栏,在您的自定义LESS文件中添加这个变量:

@grid-float-breakpoint: 0px;


Answer 9:

这是我用来引导3.3.4。 这是一个黑客,但它也不是一个为期2天的修复重做的CSS。

@media (min-width: 768px) and (max-width: 979px) {
  .navbar-header {
    width: 100% !important;
  }
  .navbar-toggle {
    display: inline-block !important;
    float: right !important;
  }
}

您可能需要调整的选择,但基本上,使头全宽度,然后显示和浮动按钮右侧。



文章来源: Prevent menu from collapsing in 768px display CSS media query