Question

我查看了多个网站，试图弄清楚为什么我的“品牌”在我的导航栏上如此之高并且无法弄明白。我正在为Pinterest做一个专门的练习。 Plz不笑。

这是代码。 @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;
}

Answer 1

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

尝试ctrl shift i，并检查元素。

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

您可能需要考虑使用的一些CSS属性： vertial对齐 line-height（列表项）位置（绝对/相对）如果包裹在div中。

Answer 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

祝你好运！

Answer 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>

无法让导航栏“品牌”失效

3 个答案: