0

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

NAVBAR 在浏览器中看起来不错： 浏览器中的导航栏

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

NAVBAR 在较小的屏幕中损坏 来自 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>

NAVBAR 的 CSS主要借鉴自：
Justified Nav Example - 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 导航栏示例中减小窗口大小。

在此处输入图像描述
在此处输入图像描述

4

3 回答 3

1

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

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

这是一个功能演示。您所要做的就是调整要测试的框架的宽度。

该演示包含 2 个导航栏：

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

另请注意，您</li>之前缺少<% end %>.

于 2013-08-24T14:35:15.743 回答
0

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

于 2013-08-18T09:14:44.197 回答
0

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

<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" />
于 2013-08-18T09:58:57.993 回答