css - 带有 Twitter Bootstrap 问题的响应式 CSS

Question

我使用 Ruby on Rails 和 Twitter Bootstrap 在我的网络应用程序中有一个 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，但不知道如何修复它。

更新:

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

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

Answer 1

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

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

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

该演示包含 2 个导航栏:

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

另请注意您有一个 </li>在 <% end %> 之前丢失.