在安装了Twitter Bootstrap gem的Ruby on Rails Spree应用程序中，我的标头包含以下代码：
<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
<%= render :partial => 'spree/shared/header' %>
(...)
</body>
共享/标题如下：
<div class="container header">
<header id="header" data-hook>
<div class="container">
<figure id="logo" class="text-center col-md-4" data-hook>
<%= logo('store/Logo.png') %>
</figure>
<%= render :partial => 'spree/shared/nav_bar' %>
<%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
</div>
</header>
</div>
徽标加载在
figure标记中。我想做的是将徽标向下延伸，并将其作为背景的一部分。例如。，
。
我该怎么做？我是否需要使其成为页眉和正文背景的一部分？还是应该在整个页面上使用CSS背景？如果是这样，我如何使其随页面重新缩放？
我希望有人能指出我正确的方向！
/ edit生成的HTML：
<body class="one-col" id="default" data-hook="body">
<div class="container header">
<header id="header" data-hook>
<div class="container">
<figure id="logo" class="text-center col-md-4" data-hook>
<a href="/"><img alt="Logo" src="/assets/store/Logo-c0fd8c5c71ef79825dba0315b84bdef5.png" /></a>
</figure>
<ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
<li><a href="/account">My Account</a></li>
<li><a href="/logout">Logout</a></li>
<li id="search-bar" data-hook>
<form accept-charset="UTF-8" action="/products" class="navbar-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<div class="form-group">
<input class="form-control" id="keywords" name="keywords" placeholder="Search" type="search" />
</div>
<input class="btn btn-success" type="submit" value="Search" />
</form>
</li>
</ul>
<nav class="col-md-12"><div id="main-nav-bar" class="navbar">
<ul class="nav nav-pills navbar-nav" data-hook>
<li id="home-link" data-hook><a href="/">Home</a></li>
<li id="shop-link" data-hook><a href="/shop">Products</a></li>
<li id="about-link" data-hook><a href="/about">About us</a></li>
<li id="contact-link" data-hook><a href="/contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" data-hook>
<li id="link-to-cart" data-hook><a class="cart-info empty" href="/cart"><span class='glyphicon glyphicon-shopping-cart'></span> Cart: (Empty)</a></li>
</ul>
<div id="locale-select" style="float: right; margin-right: 10px;" data-hook>
<form accept-charset="UTF-8" action="/locale/set" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="mx8tcgWHDqyVslG5Fxvz6N03KRhtVtr9eXYyqDJpEhQ=" /></div><select class="form-control" data-href="/locale/set" id="locale" name="locale"><option selected="selected" value="en">English (US)</option>
<option value="nl-NL">Nederlands (NL)</option></select><noscript>
<input name="commit" type="submit" value="Save changes" />
</noscript>
</form></div>
</div>
</nav>
</div>
</header>
</div>
<div class="container row" style="margin: 0 auto;" data-hook>
<.. MAIN CONTENT>
</div>
</body>
最佳答案
添加类或修改徽标的现有类（text-center或col-md-4）。
写入：margin-bottom:-30px;。如果可行，将30px值替换为合适的值。
关于html - 如何使菜单越过徽标？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22054521/