-1

Gostaria da ajuda de vocês para resolver um problema. Estou aprendendo e tentando desenhar com o Bootstrap a imagem abaixo: inserir a descrição da imagem aqui

Mas não to conseguindo. Está acontecendo o seguinte: inserir a descrição da imagem aqui

Estou utilizando até agora apenas este código:

    <nav class="navbar  navbar-default">
        <div class="container">
            <div class="navbar-header">

                <a class="navbar-brand" href="index.html"> <img src="images/Logo.png"></a>
                <!--  <a class="navbar-brand" href="#">Project name</a> -->
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Página inicial</a></li>
                    <li><a href="#about">Download</a></li>
                    <li><a href="#contact">Sobre</a></li>
                    <li><a href="#contact">Suporte</a></li>
                    <li><a href="#contact">Termos</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </nav>


    <div class="container text-center">
        <div class="row">
        <img src="images/intro1.png" alt="Bird">
        </div>
    </div>
1
  • 2
    Teria como colocar o exemplo do código no jsfiddle, apenas olhando consigo apontar apenas a ausência de um div com col-md-12(por exemplo) após o div row. Adicione um link com o fiddle e será mais fácil te ajudar. 6/11/2015 às 0:25

2 Respostas 2

0

Como você não postou nenhum css vou partir do princípio de que o único problema é a distância do banner azul em relação ao header. Não seria em relação ao logo, pois ele deve estar com position absolute para poder sobrepor os demais elementos.

Com isso você pode aumentar (ou definir, caso não haja feito) o margin-bottom do header, desse modo você consegue deixar ele mais para baixo sem que a logo fique por cima.

Outra solução seria criar uma <div class="row"> entre o header e o banner azul, e ai sim, dentro dessa div você insere o logo com uma propriedade css de translate (para mover a logo um pouco para cima) ou position:absolute para coloca-lo mais para cima também.

Mas como disse, tente colocar um fiddle ou algum código css para saber como está o comportamento.

-3

Tente por a imagem dentro de figure e alinha-la normalmente coloco as imagens dentro de div para ajudar na hora de ver em celulares pode tentar também

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 .