2

Estou tentando deixar 1 item alinhado na esquerda e 2 itens alinhados na direita com Bootstrap 4, tentei utilizar flexbox mas como são 3 itens fica um no meio e um em cada ponta, tentei fazer os 2 itens da direita como uma lista, porém dai fica um embaixo do outro e não ao lado, dai tentei colocar um inline-list na classe delas mas não surgiu efeito.

Por fim acabei centralizando com padding e margin, só que não fica nada responsivo, e já que estou utiizando bootstrap é melhor fazer com ela, porém com os exemplos que achei na documentação eu não consegui resultado.

Footer SOpt

Preciso de algo semelhante ao footer do SO, porém no lugar do nome dos links vou usar os logos.


  <footer class="footer-bg">
<div class="footer">
  <div class="footer-logo">
    <a class="navbar-brand js-scroll" href="#page-top"><img src="img/logo.png" alt="Logotipo"></a>
  </div>
  <nav class="footer-nav">
    <ul>
      <li><a href="#sobre"><i class="fab fa-linkedin-in"></i></a></li>
      <li><a href="#produtos"><i class="fab fa-instagram"></i></a></li>
    </ul>
  </nav>
</div>
<hr style="border: 1px solid rgba(77,77,77,0.5)">
<p class="text-center">Copyright © 2019 - Todos os direitos reservados <br>
</p>


EDIT

inserir a descrição da imagem aqui


SOLUÇÃO

Consegui resolver utilizando as classes de flex do bootstrap. Segue documentação do flex.

Classe utilizada para deixar um item na extrema esquerda e 2 itens na extrema direita.

<div class="d-flex bd-highlight mb-3">
 <div class="mr-auto p-2 bd-highlight">Flex item</div>
 <div class="p-2 bd-highlight">Flex item</div>
 <div class="p-2 bd-highlight">Flex item</div>
</div>

1 Resposta 1

1

Você consegue facilmente o resultado desejado utilizando as classes float do Bootstrap:

img {
  width: 100px;
  height: 30px;
}
a {
  padding-right: 5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<footer class="footer-bg">
  <div class="footer">
    <div class="footer-logo">
      <a class="navbar-brand js-scroll" href="#page-top"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShDBdzn38UgWzjCTJDykF2hZDRBggqDe3hHGF0F7jEOub1xMIr4A" alt="Logotipo"></a>

      <a class="float-right" href="#sobre">Sobre<i class="fab fa-linkedin-in"></i></a></li>
      <a class="float-right" href="#produtos">Produtos<i class="fab fa-instagram"></i></a></li>

    </div>
  </div>
  <hr style="border: 1px solid rgba(77,77,77,0.5)">
  <p class="text-center">Copyright © 2019 - Todos os direitos reservados <br>
  </p>
</footer>

13
  • Eu já havia feito algo semelhante, porém desta maneira como eu havia dito os itens ficam em na vertical, e a classe inline-itens não afeta eles para deixa-los na horizontal. Commented 24/12/2018 às 12:13
  • Você fala as li's?
    – LeAndrade
    Commented 24/12/2018 às 12:14
  • Sim, elas ficam na vertical e preciso elas na horizontal. Commented 24/12/2018 às 12:16
  • Editei a resposta, uma maneira bem simples de resolver isto é retirar a tag ul, na verdade não sei pq está utilizando lis, poderiam ser simplesmente os links, sem lis.
    – LeAndrade
    Commented 24/12/2018 às 12:20
  • Coloquei a LI por que como disse na pergunta foi uma maneira de posicionar com o flexbox, mas se for melhor remover sem problemas. Commented 24/12/2018 às 12:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .