Twitter bootstrap 尝试将徽标图像置于全宽菜单上方

我开始学习bootstrap，我对此表示怀疑

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我想有一个全宽菜单和上面的菜单，我想我的标志

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我已经有了我想要的菜单，但是我的图像在菜单里面，我想要上面的图像

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我知道这是因为我在menu div中有图像，但我也希望我的图像在

中，因为我研究这个div中的元素保持居中..这是我的目标

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我已尝试将此代码传递到

上方，但没有按我所希望的方式工作：

<div class="span3">
      <div class="area_logo">
          <a href="index.php">
           <img src="logo.png" class="logo" alt="logo" width="527" height="72">
          </a>
      </div>

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我对代码的处理：

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

body{ font-size:100%; padding:0;}

/*TOP*/
.top{background:blue; height:50px; width:100%;}
.top .area_logo{position:relative; }
.top .logo {position:absolute; top:0; left:0;}

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

我希望在div容器内的其他设备中始终居中： Deftones就像一个徽标，菜单是下面的黑色背景：s

---

由于没有显示菜单代码，因此很难给出任何真正的反馈

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

您真正需要做的就是将图像放在容器内部，或者直接放在导航栏本身内部。请记住，当菜单折叠时，您需要稍微调整定位，因为您将有如下内容：

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

幸运的是，这是一个简单的解决方案。您可以通过在徽标上设置float来控制这一点，使菜单环绕在其旁边。我已经在该场景的引导中包含了一个媒体查询。您还需要调整一些按钮的位置。这可以通过一点边际调整来实现。完成后，你看起来很好：

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>

---

希望这有帮助。

谢谢你的回答，但我的菜单代码是那排导航栏……我还没有任何菜单项，因为现在我只有背景！在bootstrap文档中查看此示例，然后选择what do you want，创建一个菜单用于学习，显示代码，然后我们可以帮助您进行自定义，因为bootstrap中的菜单有不同的选项。我仍然不了解您要查找的内容。你指的是这样的东西吗：如果不是，你将不得不制作一个粗糙的图像或其他东西来说明你在说什么。非常感谢！但事实并非如此！我会用我所尝试的更新！抱歉，没有解释清楚就给了你很多工作：/@Skelly很酷，谢谢！我不怎么使用bootply，我不知道你能这么做。

    <div class="row navbar">
            <div class="span9">
                <ul class="nav nav-pills">
                    <li class="active"><a href="#" title"Home">Inicio</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home"Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                    <li ><a href="#" title"Home">Home</a></li>
                </ul>
             </div>
    </div>
</div>