Question

我开始研究bootstrap，我怀疑地在这里。

我想要一个全宽度菜单，在这个菜单上方，我想要我的徽标。

我已经拥有了我想要的菜单，但我的图像在菜单中，我想要上面的图像。

我知道这种情况正在发生，因为我在菜单div中有图像，但我也希望我的图像在<div class="container">内，因为我研究这个div中的元素保持居中......这就是我的目标。

我已经尝试将此代码传递到<div class="row navbar">之上，但没有像我想的那样工作：

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

任何有助推器经验的人都可以提供帮助吗？

我的HTML

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

我的css：

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;}

我的代码：

http://jsfiddle.net/ritz/s6ZPm/8/

我想要的但是在div容器中总是以其他设备为中心： Deftones就像一个标志，菜单是下面的深色背景：s enter image description here

Answer 1

由于您的菜单代码未显示，因此很难提供任何实际反馈，but is this what you're looking for?

您真正需要做的就是将图像放在容器内部，或直接放在导航栏本身内部。请记住，当菜单崩溃时，您需要稍微调整位置，因为您会有这样的事情：

example of bootstrap menu alignment with logo

幸运的是，这是一个简单的修复。您可以通过在徽标上设置浮动来控制它，以便菜单包裹在它旁边。我已经在这个bootply中包含了一个媒体查询。您还需要调整按钮位置。这可以通过一点保证金调整来实现。一旦完成，你看起来很好：

enter image description here

希望这有帮助。

试图将徽标图像放在全宽菜单上方

1 个答案: