Question

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

感谢您提供的任何帮助。

-A

编辑：这是我用于导航栏的代码（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>

Answer 1

默认的navbar 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>

如果您检查导航栏元素，您会发现内部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;
}

如果更改它，您会发现“navbar”父级的高度会自动更改。您还可以维护min-height属性，只需更改其值，调整上面提到的元素的填充。

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

编辑：只需看到您的HTML，检查导航栏内链接标记的填充，减少它，更改.navbar-inner min-height，然后使用值。

Answer 2

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

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

其中1200px从980变为1200.棘手的棘手...记录，它在1104行。

有没有办法改变Bootstrap Navbar高度？

2 个答案: