5

我有一个使用 Twitter Bootstrap 制作的网站。在大屏幕上，导航栏看起来应该不错，但是如果您在手机上看到相同的导航栏，则导航栏不会崩溃。

这是我的代码：

<div class="container">
  <div class="masthead">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li class="active"><a href="/" class="">Home</a></li>
            <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
            <li><a href="koersen.html">Officiële koersen</a></li>
            <li><a href="webshop/" target="_blank">Webwinkel</a></li>
            <li><a href="diversen.html">Diversen</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>
      </div>
    </div><!-- /.navbar -->
  </div>

在第三节课上，我也尝试使用 nav-collapse，但随后它也在大屏幕上折叠起来。

4

6 回答 6

7

是的，请遵循Betty St的说明（包括响应式 css、bootstrap-collapse.js 和 Transitions 插件更新：（bootstrap-transition.js）和 jQuery）。您需要添加一个触发折叠的按钮/链接。此标签获取属性： data-toggle="collapse" data-target=".nav-collapse" 其中 data-target 可以是任何 css 选择器。将您的导航放在 data-target 下选择的标签之间，请参阅：http ://bootply.com/62921

html：

<div class="container">
      <div class="masthead">
        <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">
                <li class="active"><a href="/" class="">Home</a></li>
                <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
                <li><a href="koersen.html">Officiële koersen</a></li>
                <li><a href="webshop/" target="_blank">Webwinkel</a></li>
                <li><a href="diversen.html">Diversen</a></li>
                <li><a href="contact.php">Contact</a></li>
              </ul>
              </div>  
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>
</div>

更新 您的代码缺少 Collapse 插件所需的 Transitions 插件 (bootstrap-transition.js)。更重要的是你没有包含 jQuery。现在它应该可以工作了：http: //plnkr.co/l66QqCftGNsaG0xkBrUf

javascript包括：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-collapse.js"></script>

注意：考虑包含完整 javascripts 的编译（或缩小）版本：

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

折叠后还需要更改样式：

.navbar .in .nav li {
   display: block;
   float: none;
   width:100%;
}
于 2013-06-02T18:15:02.883 回答
7

我有类似的问题。我完全不明白为什么我的导航栏在手机中没有崩溃。Atlast 我发现我错过了以下元标记。

<meta name="viewport" content="width=device-width, user-scalable=false;">

这将解决问题。

于 2016-04-25T09:55:51.143 回答
5

您需要包含 twitter bootstrap 的响应式 css 文件，并且还需要使用 bootstrap-collapse.js。

请注意“响应式导航栏”中http://twitter.github.io/bootstrap/components.html#navbar上的信息：

小心！响应式导航栏需要折叠插件和响应式 Bootstrap CSS 文件。

快速链接：

于 2013-06-02T18:06:42.630 回答
1
  1. 您将需要编译后的 bootstrap.js 或 bootstrap.min.js版本，并检查折叠和转换[并因此包含] 以进行编译。
  2. 给你的父 div一个id. 如果它已经有一个，请记下它。您的父 div 将是其直系子级组成下拉列表 [链接、按钮等]
  3. data-toggle将和添加 到我们之前讨论过的父 divdata-target的每个子元素。 假设父 div是，子元素应该每个都 附加在链接属性中。
    id="my_parent_div"data-toggle="collapse" data-target="#my_parent_div"

这是我的固定导航栏代码的示例：

<div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#book"  data-toggle="collapse" data-target="#example-navbar-collapse">Book a Room!</a></li>
        <li class="divider"></li>
        <li><a href="#services" data-toggle="collapse" data-target="#example-navbar-collapse">Services</a></li>
        <li><a href="#packages" data-toggle="collapse" data-target="#example-navbar-collapse">Packages</a></li>
        <li><a href="#contacts" data-toggle="collapse" data-target="#example-navbar-collapse">Location</a></li>
      </ul>
    </div>

希望这可以帮助 ：）

于 2014-07-21T18:14:38.160 回答
0

要添加到dustbuster，我也遇到了问题，并尝试先加载JQuery，然后再加载Boostrap，但问题没有得到解决，并从下面的链接中注意到另一个提示：-

https://www.freecodecamp.org/forum/t/solved-my-bootstrap-navbar-toggle-is-not-toggling/15222/20

添加 Bootstrap.min.js 而不是 Bootstrap.min.css。添加 js 时请不要删除 Bootstrap.min.css。两者都添加后，问题就解决了。

于 2019-08-22T13:39:57.317 回答
0

我有同样的问题，我发现我加载了 jQuery 两次，我在页脚中加载了 jQuery，在 bootstrap 之后。除了出于某种原因崩溃之外，页面上的其他所有内容都可以正常工作。我回到了基础，它解决了这个问题。加载 jQuery，然后引导，并确保没有其他随机包含的页面也在加载 jQuery。这与引导 4 导航元素有关。

于 2018-02-12T04:33:42.267 回答