Question

我试图使用bootstrap，我没有找到一种方法来获得我想要的东西。这是我试图做的例子：

它是一个带有完整背景图片的单页。我能够做到这一点。现在，我不能做两件事：

将具有不透明度的div粘贴到页面底部，然后使用该位置生成带有div的图标。我试图使用绝对位置和负边距，但它不起作用。

如果你们想看，我的测试页就在这里：http://ninabecker.hospedagemdesites.ws/dev/

有人可以帮我把div固定在底部并制作具有该位置的社交图标，一半在内部，一半在div之外？我真的输了。

Answer 1

通过最少的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&amp;oq=nina+becker&amp;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;
    }
}

Result

More about bootstrap responsive grid

中心的div固定在底部，另一个居中的div覆盖它

1 个答案: