JSFIDDLE demo如何使标志留在位置,即使当浏览器大小
HTML
<div class="ratio-1439-330 bg-cover" style="background-image: url('https://www.agtinternational.com/wp-content/uploads/2013/11/City-solution.jpg');">
<div class="l-center" style="max-width: 1240px;">
<div class="square-logo bg-cover"
style="background-image:url('http://www.astronautamarcospontes4077.com.br/wp-content/uploads/2014/07/person-icon.png');">
</div>
<div class="header-cover" style="background-color: #373737; opacity: 0.9; position: absolute; bottom: 0; left:0; width: 100%; overflow: hidden; padding: 10px 0;">
<div class="l-center" style="max-width: 1240px">
<div class="nav nav-tabs" style="margin-left: 338px">
<a class="active" href="#overview" data-toggle="tab">
Overview
</a>
<a href="#visits" data-toggle="tab">
Visit
</a>
</div><!-- ./tab-lined-top-->
</div><!--tabs-->
</div><!--header cover-->
</div>
</div>
<div class="tab-content l-center" style="max-width: 1240px;">
<div id="overview" class="tab-pane active">
<div class="l-center" style="max-width: 1240px;background:red;">
TEST 1
</div>
</div><!--#overview-->
<div id="visits" class="tab-pane">
<div>
TeST 2
</div>
</div>
</div><!--tab-content-->
CSS
[class*="ratio"] {
position: relative; }
[class*="ratio"]:after {
content: '';
display: block; }
[class*="ratio"] .cly-ratio-content {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.ratio-1439-330:after {
padding-top: 22.932592078%; }
.l-center{
margin: 0 auto;
}
.square-logo{
background: #fff;
position: absolute;
width: 180px;
height: 180px;
bottom: 25px;
left: 0;
margin-left: 115px;
z-index: 800;
opacity: 1;
}
.bg-cover{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.nav-tabs{
border-bottom: 0;
}
.nav{
margin-bottom: 0;
}
目前,它的工作原理上的jsfiddle,但不是我的本地机器上,所以你可能不明白我在问。 Bootstrap仅适用于可点击的选项卡。当浏览器正在调整大小时,徽标从左向右移动,移动时看起来很刺眼。另一个问题是,具有l-center和max-width的div似乎对于选项卡窗格内容来说效果不佳。怀疑这是因为没有身高。
有什么办法可以让标识保持垂直排列,标签内容和标签在浏览器调整大小时也应该移动?
帮助感谢!
哦谢谢,我会在稍后测试它,希望它能起作用。谢谢,并会报告回来,如果仍然有问题 – joe 2014-12-06 17:48:20