带有 Twitter Bootstrap 问题的响应式 CSS答案

【问题标题】：Responsive CSS with Twitter Bootstrap Issue带有 Twitter Bootstrap 问题的响应式 CSS
【发布时间】：2013-08-18 09:06:57
【问题描述】：

我的网络应用程序中有一个使用 Ruby on Rails 和 Twitter Bootstrap 的 NavBar。

NAVBAR 在浏览器中看起来不错，如下所示：

但是，当我在 Galaxy Note 的浏览器中查找网络应用时，导航栏会中断。

来自 app/views/layouts/application.html.erb 的片段

  <div class="masthead">
    <h3 class="active"><a href="/">WebsiteName</a></h3>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact Us</a></li>

            <% if current_user %>
              <li class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      <strong><%= current_user.name %></strong>
                      <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="/signout">Sign out</a></li>
                  </ul>
            <% end %>

          </ul>
        </div>
      </div>
    </div>
  </div>

导航栏的 CSS 主要借鉴自：
合理的导航示例 - http://getbootstrap.com/2.3.2/examples/justified-nav.html

  /* Customize the navbar links to be fill the entire space of the .navbar */
  .navbar .navbar-inner {
    padding: 0;
  }
  .navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
  }
  .navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
  }
  .navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
  }
  .navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
  }
  .navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
  }

我该如何解决这个问题？这些天我正在学习响应式 CSS，但不知道如何修复它。

更新：

请注意，上述问题已得到修复。
但是，当这个问题得到解决时，我发现了一些问题。如果我将窗口的大小减小太多，导航栏就会损坏。用户部分位于导航栏之外。 问题也反映在 Bootstrap 示例中。

我附上了展示问题的屏幕截图。要自己查看，只需减小Bootstrap navbar example 中的窗口大小。

【问题讨论】：

您的User 按钮元素看起来与其他元素非常不同。您没有关闭 <% if current_user %> 正下方的列表元素
感谢 @user568109，但 edsioufi 找到了丢失的 nowrap 元素，现在已修复。

标签： css ruby-on-rails twitter-bootstrap responsive-design

【解决方案1】：

问题在于“联系我们”链接被换行。请注意，在 Bootstrap example 中，导航栏没有包含多个单词的链接。

将white-space: nowrap; 添加到.navbar .nav li a 类中。

这是一个正常运行的demo。您所要做的就是调整要测试的框架的宽度。

该演示包含 2 个导航栏：

第一个已修复问题的导航栏。
第二个通过将其style 属性设置为"white-space: normal;" 来重现错误行为以隔离“联系我们”链接中的原因，从而覆盖修复。

另请注意，您在 <% end %> 之前缺少一个 </li>。

【讨论】：

我发现问题解决后。如果我在 Jsfiddle 中过多地减小窗口的大小，上面的正确导航栏就会被破坏。用户部分位于导航栏之外。这个问题也反映在 Bootstrap 示例中。我已更新问题以反映我的发现。

【解决方案2】：

定义.navbar .nav 40px 的高度并添加overflow: hidden;

【讨论】：

【解决方案3】：

您的引导文件加载应如下所示以使响应式工作：

<link rel="stylesheet" type="text/css" href="~/Content/bootstrap.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="~/Content/bootstrap-responsive.css" />

【讨论】：

在我的app/assets/stylesheets/bootstrap_and_overrides.css.less 文件中，我有@import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive"; 。然后在这两行之后，我有` `。因此，我的订单与您建议的不同。有关系吗？
不。只是两个css文件的位置很重要。meta标签在哪里并不重要。
在这种情况下，这个地方是正确的。但是，设计不是响应式的。