无法让导航栏“品牌”下降答案

【问题标题】：Can't get navbar "brand" down无法让导航栏“品牌”下降
【发布时间】：2013-12-31 05:43:37
【问题描述】：

我查看了多个网站，试图弄清楚为什么我的“品牌”在我的导航栏上如此之高而无法弄清楚。我只是为了练习而抄袭 Pinterest。请不要笑。

这里是代码。 @import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                                                   #ecf0f1;
$font-family-sans-serif:                'Lato', 'Helvetica Neue', Helvetica, Arial,         sans-serif;
$navbar-height:                                        25px;
$navbar-default-bg:                          white;
$navbar-default-brand-color:      #c0392b;
$brand-primary:                                    #c0392b;
$jumbotron-bg:                                         white;

@import 'bootstrap';

.center {
 text-align: center;
}

.navbar-brand {
 font-weight: bold;
}

【问题讨论】：

有float: left; 吗？也许添加一些代码来查看确切的问题。

标签： ruby-on-rails twitter-bootstrap erb

【解决方案1】：

您是否查看过样式表以确保您应用了正确的样式？

尝试 ctrl shift i，然后检查元素。

我不知道您的徽标是如何构建的，是否包含在 div 标签中，是否为列表项等。需要更多信息。

您可能需要考虑使用的一些 CSS 属性：垂直对齐行高（用于列表项）位置（绝对/相对）如果包含在 div 中。

【讨论】：

【解决方案2】：

如果没有看到您的样式表就很难说，但在我看来，您的品牌和导航元素（Home About）都跨越了您的标题的整个长度，因此它们相互堆叠。

一个粗略的解决方案，在不知道您当前的样式表是什么样子的情况下，可能是这样的：

.brand {
    float: left;
    width: [some explicit width];
}

.nav {
    float: right;
    width: [some explicit width];
}

通过定义宽度和浮动元素，它们不应像现在那样堆叠在一起。您应该尝试使用 Chrome 的内置开发人员工具来查看元素在页面上的显示方式，我敢打赌您的品牌和导航的边界框都将跨越页眉的整个长度。当我在尝试定位元素时遇到像你这样的情况时，我发现这很有帮助。

或者，您可以使用 Bootstrap 的内置行来设置您的结构，

<div class="row">
    <div class="span4">[brand here]</div>
    <div class="span4"></div>
    <div class="span4">[nav here]</div>
</div>

Twitter Bootstrap 文档包含有关此方法的具体问题的任何答案： http://getbootstrap.com

祝你好运！

【讨论】：

【解决方案3】：

希望这会对您有所帮助。

<div class="navbar">
<div class="navbar-inner">
    <div class="container-fluid">
        <a 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>
        </a
        <a class="brand" href="#" name="top">Brand Name</a>

            <ul class="nav pull-right">

                    <li><a href="#"><i class="icon-wrench"></i> HOME</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="icon-share"></i>ABOUT</a></li>
                </ul>
            </div>
        </div>

    </div>

</div>

【讨论】：