css - 使用 Twitter Bootstrap 的响应式 CSS

Question

在我的 Rails 应用程序中，我使用的是Twitter Bootstrap. 我的页脚在具有足够宽度的横向模式的屏幕上正确显示。
这是它的外观：

但是，在我的 Android Galaxy Note 上的浏览​​器上，它似乎坏了。如果我在横向模式下使用浏览器，页脚看起来是正确的，但在纵向模式下它会中断。看起来像：

这是我的代码：

<div id="footer">
  <div class="container">
    <p class="muted credit" style="text-align: center" >

        &copy; 2013 <a href="http://www.example.com">WebsiteName.com</a> All Rights Reserved.   |   
        <a href="" title="Privacy Policy">Privacy Policy</a>   |     
        <%= link_to 'Terms of Service', terms_of_service_path %>

    </p>
  </div>
</div>

上面的 CSS 是从Example - sticky-footer借来的：

  html,
  body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
  }

  /* Wrapper for page content to push down footer */
  #wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
    position: fixed;
    left:0;
    top:0;
  }

  /* Set the fixed height of the footer here */
  #push,
  #footer {
    height: 60px;
  }
  #footer {
    background-color: #f5f5f5;
  }

  /* Lastly, apply responsive CSS fixes as necessary */
  @media (max-width: 767px) {
    #footer {
      margin-left: -20px;
      margin-right: -20px;
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .container .credit {
    margin: 20px 0;
  }

我不知道为什么它不能正确渲染它。我是响应式 CSS 的新手，我正在学习。请让我知道出了什么问题。

Answer 1

它呈现完全正常。没有足够的空间让内容放在一行中，所以它会放在新的一行。如果您不希望您的链接像这样在两行上分开并且始终适合一行，请尝试：white-space: nowrap;在锚标记上，全局或您选择的分辨率上。