我试图使用bootstrap,我没有找到一种方法来获得我想要的东西。这是我试图做的例子:
它是一个带有完整背景图片的单页。我能够做到这一点。现在,我不能做两件事:
将具有不透明度的div粘贴到页面底部,然后使用该位置生成带有div的图标。 我试图使用绝对位置和负边距,但它不起作用。
如果你们想看,我的测试页就在这里:http://ninabecker.hospedagemdesites.ws/dev/
有人可以帮我把div固定在底部并制作具有该位置的社交图标,一半在内部,一半在div之外?我真的输了。
答案 0 :(得分:2)
通过最少的html / css更改,您可以执行此操作
1)在模板中
<div class="container">
<div class="row force-to-bottom">
<div class="col-xs-1"></div>
<div class="col-xs-10 text-center pai-armazena-textos">
<div class="row force-to-bottom2">
<div class="col-md-1 col-sm-1 hidden-xs"></div>
<div class="col-xs-12 col-sm-10 col-md-10 text-center">
<div class="guarda-redes">
<ul class="lista_redes_sociais">
<li><a href="https://www.facebook.com/ninabeckeroficial?fref=ts"><img src="facebook_icone.png" alt=""></a></li>
<li><a href="https://twitter.com/becker_nina"><img src="twitter_icone.png" alt=""></a></li>
<li><a href="https://www.instagram.com/becker_nina/?hl=pt-br"><img src="instagram_icone.png" alt=""></a></li>
<li><a href="https://www.youtube.com/results?search_query=nina+becker&oq=nina+becker&gs_l=youtube.12...0.0.0.44994.0.0.0.0.0.0.0.0..0.0...0.0...1ac..11.youtube."><img src="youtube_icone.png" alt=""></a></li>
<li><a href="https://open.spotify.com/artist/4HNWCD51r0ZgOkQGuxMgJV"><img src="spotify_icone.png" alt=""></a></li>
<li><a href="https://itunes.apple.com/br/artist/nina-becker/id258763927"><img src="itunes_icone.png" alt=""></a></li>
<li><a href="http://www.deezer.com/br/artist/1291202"><img src="deezer_icone.png" alt=""></a></li>
</ul>
</div>
</div>
<div class="col-md-1 col-sm-1 hidden-xs"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 armazena-textos text-left">
CONTATO PARA SHOWS:<br>
<b>Gabriela Haber</b><br>
gabriela@sensaproducoes.com.br<br>
55 21 98187-5464<br>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 armazena-textos text-left">
<br><b>Maria Clara Ferreira</b><br>
mariaclara@sensaproducoes.com.br<br>
55 21 96569-2113<br>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 armazena-textos text-left">
ASSESSORIA DE COMUNICAÇÃO:<br>
<b>Mercedes Tristão</b><br>
mercedes@sensaproducoes.com.br<br>
55 11 3034-5051<br>
</div>
</div>
</div>
<div class="col-xs-1"></div>
</div>
</div>
2)风格
..other styles
.pai-armazena-textos {
background: rgba(0,0,0,0.5);
border-radius: 5px;
filter: alpha(opacity=50);
opacity: 1;
padding-top: 15px;
padding-bottom: 10px;
zoom: 1;
}
.force-to-bottom2 {
top: -20px;
left:50%;
margin-left:-50%;
position:absolute;
width: 100%;
z-index: 1;
}
.force-to-bottom {
bottom: 2%;
left:50%;
margin-left:-50%;
position:absolute;
width: 100%;
}
@media (max-width:991px) {
.force-to-bottom2 {
top: 0px;
left: 0px;
position: relative;
margin-left: 0px;
}
.lista_redes_sociais li {
padding: 10px;
}
}