css - Twitter bootstrap 3.0 移动版菜单/标题

Question

我正在使用 Bootstrap 3.0 构建网站，当我在 iPhone 上对其进行测试时，我发现标题有问题。

标题 - “DatJoke.com”去了错误的地方。你能帮我看看它可能有什么问题吗？

这是通过 Git https://github.com/ummahusla/datjoke.com访问网站

先感谢您

Answer 1

这是不可能的，因为移动浏览器太小而无法容纳该标题。您需要记住，引导程序是响应式的，并且会根据设备的屏幕尺寸适应设备的最佳“视图”。你有三个选择：

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">从中删除head- 它可能适用于某些手机，因为没有此标签，它们不再被迫显示移动版本。
2. 编译无响应版本的引导程序
3. 执行以下操作并拥有一个类似于http://getbootstrap.com上的导航栏，并按照以下说明进行操作：

首先，您需要包含bootstrap.js响应式导航栏。
其次，您的导航栏需要采用以下格式：

<nav class="navbar navbar-default" role="navigation">
  <!-- 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-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"><!-- Your site name --></a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <!-- Nav elements -->
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

因此，以您为例，它应该是：

<nav class="navbar navbar-default" role="navigation">
      <!-- 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-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">DatJoke.com</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="addjoke.html">Add joke</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </nav>