在我的 Joomla 3.x Bootstrap site我想像这样放置一个与导航栏和幻灯片重叠的 Logo :
导航栏是“固定顶部”的，幻灯片放映放置在任何其他容器之外，以便以全宽显示。 使事情变得更加复杂的是， Logo 应该像导航栏一样在滚动时固定在顶部。 但在移动设备上，它应该向上移动(同样，就像导航栏一样)，甚至被另一个(较小的)图像取代。
这是如何实现的？
Logo 链接到主页，现在通过将 href 和 Logo 图像本身放在 index.php 中来完成。
要根据视口(viewport)轻松更改图像，我必须在 css 中进行。但是如何链接到主页呢？
请帮助我正确放置 Logo 图像(响应式)。
.logo-wrapper {
position: relative;
z-index:1;
}
.toplogo {
position:absolute;
width:auto;
height:auto;
z-index:10;
left: 0px;
top: 0px;
}<body id="<?php echo ($itemid ? 'itemid-' . $itemid : ''); ?>">
<div id="toplogo">
<a href="<?php echo $root = JURI::root();?>" onfocus="blur()">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo-test.png" title="Zur Startseite" alt="<?php echo $root = JURI::root();?>" border="0"/>
</a>
</div>
<!-- Begin Navbar-->
<?php if ($this->countModules('position-9')): ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<!-- navbar-inverse navbar-fixed-top -->
<div class="navbar-inner">
<div class="container">
<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="#"><?php echo $sitename ?></a>-->
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="position-9" style="none" />
</div>
</div>
</div>
</div><!--End navbar-->
<?php endif; ?>
<?php if ($this->countModules('position-5')): ?>
<div class="bigimage">
<jdoc:include type="modules" name="position-5" style="none" />
<div class="clearfix"></div>
</div><!--End Bigimage-->
<?php endif; ?>
<div class="container">
<!-- Begin Header-->
<div class="header">
<div class="header-inner">最佳答案
考虑这个布局:
<div class="row top-menu-row"> <!-- added .row -->
<div class="span3"> <!-- added .span3 -->
<a class="toplogo" href="http://www.lyzarr.com/testsite/" onfocus="blur()" style="z-index: 1; position: absolute;">
<img style="" src="/testsite/templates/test-template-joomla3-bootstrap_101/images/logo-test.png" title="Zur Startseite" alt="http://www.lyzarr.com/testsite/" border="0">
</a>
</div> <!-- end .span3 -->
<div class="span9 hidden-desktop"> <!-- added .span9 -->
<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div> <!-- end .span9 -->
<div class="span9"> <!-- added .span9 -->
<div class="nav-collapse collapse" style="z-index: 2; height: 0px;">
<ul class="nav menu nav-tabs">
<li class="item-101 current active"><a href="/testsite/"><span>Home</span></a></li><li class="item-102 dropdown deeper parent"><a class=" dropdown-toggle" data-toggle="dropdown" href="#"><span>About<b class="caret"></b></span></a><ul class="nav-child unstyled small dropdown-menu"><li class="item-103"><a href="/testsite/about/info.html"><span>Info</span></a></li></ul></li></ul>
</div>
</div> <!-- end .span9 -->
</div>
此处 Logo 在前，菜单在后。因为您的 Bootstrap 版本是 2.3.2，如果设备的水平分辨率为 480 像素及以下，它会使所有列的宽度为 100%。无论屏幕分辨率如何，添加以下样式都会以百分比固定列宽:
.top-menu-row .span3
{
width: 22% !important;
float: left;
height: auto;
}
.top-menu-row .span9
{
width: 74% !important;
float: right;
}
并在设备的媒体查询中删除绝对定位，使您的 Logo 适合列宽:
@media (max-width: 767px) {
a.toplogo {
position:relative;
}
}
关于css - Logo 放置重叠//Joomla Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29803028/