我的 bootstrap 导航栏折叠断点不会改变

Question

如果网页宽度低于 1024 像素但它会在 700 左右像素宽度下折叠，我正试图让我的 bootstrap 导航栏折叠。我已经尝试了很多我用谷歌搜索但没有运气的解决方案。我已经尝试 CSS 从这个 post “Bootstrap 3 Navbar Collapse” 它有一个类似于我的问题。但无论我做什么我都不会在 1024px 宽度后崩溃。我试过复制他们的 html(boostrap navbar)+css 只是为了看看是否可行，但运气不好。

我的CSS

@media (max-width: 1024px)  {
    ul.nav.navbar-nav{
    margin-left:-15px;
}
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

我的 Bootstrap 导航栏

<nav>
<img class="kopakuttlogo" src="kopakuttlogo.jpg" alt="Logo" width="400" height="400"/>
<div class="navigatsioon">
<div class="navbar navbar-default" role="navigation">
      <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    </div>


<div class="container-fluid">
    <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
          <li><a href="http://www.haaboja.ee/" class="active">AVALEHT</a></li>
         <li><a href="Hinnakiri.php">HINNAKIRI</a></li>
         <li><a href="Renditingimused.php">RENDITINGIMUSED</a></li>
        <li><a href="tehnika.php">TEHNIKA</a></li>
        <li><a href="kontakt.php"></span>KONTAKT</a></li>
      </ul>



        </li>
      </ul>
      </div><!-- /.navigatsioon -->
      </div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
  </nav>

Answer 1

嘿，我可以在任何地方添加 .navigation 来工作了

@media (max-width: 1024px)  {
    .navigatsioon ul.nav.navbar-nav{
    margin-left:-15px;
}
   .navigatsioon .navbar-header {
        float: none;
    }
    .navigatsioon .navbar-left,.navbar-right {
        float: none !important;
    }
    .navigatsioon .navbar-toggle {
        display: block;
    }
    .navigatsioon .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navigatsioon .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
   .navigatsioon .navbar-collapse.collapse {
        display: none!important;
    }
    .navigatsioon .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
   .navigatsioon .navbar-nav>li {
        float: none;
    }
    .navigatsioon .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navigatsioon .collapse.in{
        display:block !important;
    }
}

Answer 2

Bootstrap。如何更改导航栏折叠断点

转到 Customize page / Grid system 并在字段 @grid-float-breakpoint 中设置您需要的值。
点击页面底部的Compile and Download按钮。
从生成的存档中提取文件 bootstrap.css 和 bootstrap.min.css。
使用它们代替您网站上的标准文件 bootstrap.css 和 bootstrap.min.css。

不需要别的。

我的 bootstrap 导航栏折叠断点不会改变

My bootstrap navbar collapse breakpoint wont change

html

css

media

breakpoints

twitter-bootstrap