1

Estava usando o Boostrap 3 e migrei para o 4, só que algumas coisas quebraram. Consegui resolver algumas, mas estou com problema com esse footer.

 <div class="copyright">
    <div class="container">
        <div class="col-md-6 ">
            <p>© Copyright  @DateTime.Now.Year.- LMS/US-LOG/OLNF/TM</p>
        </div>
        <div class="row">
            <div class="col-md-6">
                <ul class="bottom_ul">
                    <li><a target="_blank">GISSUB</a></li>
                    <li><a href="#">SGMAR</a></li>
                    <li><a href="#">Suporte</a></li>
                    <li><a href="#">Chamados</a></li>
                    <li><a href="#">Recursos</a></li>
                </ul>
            </div>
        </div>
    </div>

 .bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
 .bottom_ul li { float:left; line-height:40px;}
 .bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
 .bottom_ul li a { color:#FFF;  font-size:12px;}

Como vcs podem ver na imagem abaixo, eles não estão alinhados. Como eu faria para deixar essas divs na mesma linha e a div da direita alinhada a direita da tela?

FOOTER

1 Resposta 1

0

Seu código está com alguns problemainhas.

Primeiro a div copyright não está fechada. Depois a sua div class row está no lugar errado ela deveria estar antes da primeira col-md-6, depois vc precisa usar o mesmo line-height no elementos para ele ficarem alinhados...

Para ajustar o texto de forma a ficar alinhado o primeiro a esquerda em telas grande e o outro a direita em telas grande vc pode usar alinhamentos em flex para a UL e com text-align para a col-md-6

Alinhamento com texto: https://getbootstrap.com/docs/4.0/utilities/text/
Alinhamento do flex: https://getbootstrap.com/docs/4.0/utilities/flex/

inserir a descrição da imagem aqui

Ficaria algo como isso para alinhar a direita e a esquerda e depois em telas pequena coloca tudo centralizado como na imagem acima.

<div class=" col-md-6 text-center text-md-left">
<ul class="bottom_ul d-flex justify-content-center justify-content-md-end">

Veja o resultado aqui: Exiba em "Página toda" já que vc está usando col-md só vai ficar duas coluna na mesma linha em telas maiores que 765px

.copyright p {
    line-height: 40px;
}

.bottom_ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0px;
}

.bottom_ul li {
    line-height: 40px;
}

.bottom_ul li:after {
    content: "/";
    color: #f00;
    margin-right: 8px;
    margin-left: 8px;
}

.bottom_ul li a {
    color: #f00;
    font-size: 12px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<div class="copyright">
    <div class="container">
        <div class="row">
            <div class=" col-md-6 text-center text-md-left">
                <p>© Copyright @DateTime.Now.Year.- LMS/US-LOG/OLNF/TM</p>
            </div>
            <div class="col-md-6">
                <ul class="bottom_ul d-flex justify-content-center justify-content-md-end">
                    <li><a target="_blank">GISSUB</a></li>
                    <li><a href="#">SGMAR</a></li>
                    <li><a href="#">Suporte</a></li>
                    <li><a href="#">Chamados</a></li>
                    <li><a href="#">Recursos</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

4
  • Opa, obrigado pela explicação tão detalhada. Sempre fui profissional backend, mas agora fui obrigado a pegar esse trabalho deixado por outra pessoa, então to tendo que me virar e to meio perdido rs
    – Jhensen
    16/11/2018 às 10:57
  • @Jhensen sem problemas no que eu puder ajudar eh só me dar o toque, mas a documentação do BS4 eh bem completa e tem classe nativa pra quase tudo! Boa sorte ai abs
    – hugocsl
    16/11/2018 às 10:59
  • Valeu! Aproveitando, como vc gerou esse gif, foi pelo chrome? que vc fez o teste da resolução?
    – Jhensen
    16/11/2018 às 13:23
  • 1
    Usei um programinha para Windows que chama ScreenToGif, para linux ou mac vc tem que procurar algo como "screen recorder" ou algo assim goolge
    – hugocsl
    16/11/2018 às 13:36

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 .