0

我正在使用 BootStrap3 CSS 导航栏。在我的 jsfiddle 演示中，它在 Chrome 和 FF&IE 之间运行良好，但在网站上，FF&IE 在菜单下方有一个巨大的条形/空白空间。我似乎无法使用 FF 元素检查器找到问题。如果我禁用我的主题样式，它会修复一些问题，但它仍然很大，所以那里可能存在一些冲突。我已经禁用了我能想到的大部分东西，但仍然无法弄清楚冲突或我做错了什么。

JS Fiddle vs网站

<div class="navbar navbar-default navbar-inverse" role="navigation">
    <div class="navbar-header"> <a class="navbar-brand" href="#"> Year </a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#year-navs"> <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="year-navs">
        <ul class="nav navbar-nav">
            <li><a href="/football/colorado/team/mountain_range/2007/">2007</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2008/">2008</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2009/">2009</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2010/">2010</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2011/">2011</a>
            </li>
            <li><a href="/football/colorado/team/mountain_range/2012/">2012</a>
            </li>
            <li class="active"><a href="/football/colorado/team/mountain_range/2013/">2013</a>
            </li>
        </ul>
    </div>
</div>

FF 真的很大

它应该只有 52 像素（左右）高。

我究竟做错了什么？冲突的 CSS 在哪里？我没有正确使用/安装 Bootstrap CSS 吗？

4

2 回答 2

1

我花了一段时间才弄清楚，然后很明显：

您的侧边栏向左浮动。正在清除浮动，navbar因此它可以优雅地包含它们（其中的所有导航元素都是浮动的），但是由于它不在浮动元素中，所以它正在清除它周围的所有浮动。

您将需要添加float: left（或float: right）到包含元素，这样navbar就不会尝试清除该容器外的浮动。

您<div style="margin: 0 0 0 170px;">的代码中似乎是相关的容器。

取而代之的是，尝试使用负的左边距、用于补偿的左边距和 100% 的宽度：

<div style="margin: 0 0 0 -170px; float: right; padding-left: 170px; width: 100%;">

你可能应该把它移到你的样式表中，但我敢打赌你知道这一点。

于 2013-11-11T05:47:28.973 回答
0

我在这个领域没有太多经验，但我可能会为您提供解决方案。只需添加一个约束高度：52px；到您的 CSS 中的 .navbar 类。

于 2013-11-11T04:45:59.723 回答