2

我正在使用 Twitter 的 Bootstrap 设计一个网站，但我在使用响应式导航栏时遇到了困难。在引导程序中，导航栏允许移动用户单击图标来扩展导航栏并显示导航链接。我无法找到如何调整最大高度...当我尝试使用其中一个下拉栏时，导航栏不会相应地改变大小，并且用户无法看到任何链接。

感谢您的任何帮助，您可以提供。

-一种

编辑：这是我用于导航栏（html）的代码，我使用的 css 是标准的 bootstrap.css 和 bootrstrap-responsive.css：

<div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="http://example.com">organization</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li><a href="index.html">Home</a></li>
                            <li class="active"><a href="contact.html">Contact</a></li>
                            <li><a href="nowplaying.html">Now Playing</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="public.html#observatory">Observatory</a></li>
                                    <li><a href="public.html#planetarium">Planetarium</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">For Teachers and Schools</li>
                                    <li><a href="schools.html#programs">Programs</a></li>
                                    <li><a href="schools.html#events">Host an Event</a></li>
                                    <li><a href="schools.html#education">Educational Initiatives</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="students.html#observatory">Observatory</a></li>
                                    <li><a href="students.html#planetarium">Planetarium</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">Physics</li>
                                    <li><a href="xxx.com">Physics Homepage</a></li>
                                    <li><a href="xxx.com">Physics and Astronomy</a></li>
                                </ul>
                            </li>
                            <li><a href="volunteer.html">Volunteer</a></li>
                            <li><a href="faq.html">FAQ</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
4

2 回答 2

2

默认导航栏 html 代码如下：

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Title</a>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

如果您检查 navbar 元素，您会发现内部 div (navbar-inner) 具有类：

.navbar-inner {
   min-height: 40px;
}

你可以去掉这个值，发现导航栏的高度保持不变，这是正常的，因为导航栏的高度设置为“自动”。因此，如果您删除min-height高度将取决于链接标签的内边距、内边距以及<ul></ul>内<a class="brand"></a>边距。

.navbar .nav > li > a {
  float: none;
  **padding: 10px 15px 10px;**
  color: #777;
  text-decoration: none;
  text-shadow: 0 1px 0 #FFF;
}

.navbar .brand {
  display: block;
  float: left;
  **padding: 10px 20px 10px;**
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #777;
  text-shadow: 0 1px 0 #FFF;
}

如果你改变它，你会发现“导航栏”父级的高度会自动改变。您还可以维护该min-height属性并仅更改其值，调整我上面提到的元素的填充。

对于响应式部分，您可以bootstrap-responsive.css在特定媒体查询中编辑要编辑的分辨率的所有样式。

编辑：刚刚看到你的 HTML，检查导航栏中链接标签的填充，减少它，.navbar-inner min-height也改变它，并使用这些值。

于 2013-07-05T17:16:28.693 回答
1

好的，我修复第一部分（当我想要时没有调整大小的标题）的方法是通过更改 bootstrap-responsive.css 中的最小宽度值，如下所示：

@media (min-width: 1200px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}    
}

where1200px已从 980 更改为 1200。棘手的棘手......为了记录，它在第 1104 行。

于 2013-07-05T19:28:36.433 回答