0

Coloco 3 imagens com links no inicio do site, coloquei pra ser responsivo, mas quando diminuo a tela ela fica toda bugada. E preciso que as imagens fiquem no centro da tela, uma do lado da outra, e quando a tela diminuir elas simplesmente continuem uma do lado da outra.

<div class="row">

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></a></li>
            </ul>
        </div>

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></li>
            </ul>
        </div>

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></li>
            </ul>
        </div>

</div>

CSS:

    .lipostagem{

    left: 86%;
    position: relative;
}

.liviagem{
  /*position: relative;
  left: 120%;*/

}

.lientregue{
position: relative;
right: 73%;

}

2 Respostas 2

3

col- sempre deve ser filho de .row, isto seria o correto em Bootstrap:

<div class="row">
      <div class="col-xs-4 col-md-4 col-sm-4">
            ...
      </div>
</div>

E dentro de ul só pode usar li, isto seria o correto e li só pode ser filho de ul:

<ul>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ul>

ou seja tem muitos problemas no seu código, da maneira que esta afeta o comportamento do Bootstrap e por isto não funciona.

Documentação do sistema de Grid:

Código corrigido

Troquei o img-responsive por uma classe propria e pra remover os espaçamentos adicione isto:

.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
   padding: 0 !important;
   margin: 0 !important;
}

.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
  display: block;
  width: 100%;
}

Exemplo no Bootply: https://www.bootply.com/IjaKulKqgI

*{
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

body{

    padding-top: 50px;
    background: #f2f2f2;
      overflow: hidden;
}

.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
   padding: 0 !important;
   margin: 0 !important;
}

.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
  display: block;
  width: 100%;
}
/*LOGIN*/

.form-login{
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-radius: 10px;
    background: #eee;
}

/*FIM LOGIN*/

.post:hover,
.entregue:hover,
.viagem:hover{
    color: #00497f;
}
.post:focus,
.entregue:focus,
.viagem:focus{
    color: #00497f;
}


/*.img1{
    float: right;
}*/
/*.img2{
    float: none;
}
.img3{
    float: right;
}*/

.flex-centralizado {
  display: flex;
  justify-content: center;
}

li{

    list-style-type: none;
}

/*
.viagem{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
*/
.entregue,
.viagem{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
.post{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
.lipostagem{

    left: 86%;
    position: relative;
}

.liviagem{
  position: relative;
  left: 120%;

}

.lientregue{
position: relative;
right: 73%;

}


/*#buscar-postagem{
    left: 76%;

    position: static;
}
#buscar-viagem{
    float: left;

    position: static;

}
#buscar-entregue{

    right: 64%;
    position: static;

}*/



.entregue,
.post,
.viagem{
    color: #9b9b9b;

}



/*
.container{
    width: 50%;
    height: 100%;
    margin: 0 auto;

}
*/
section{
    margin: 2em 0;
    overflow: hidden;
}
/*width: 50%;*/
.center{
    left: 25%;

    position: relative;
    align-items: center;
}
/*
.tabela{
    width: 30%;
    position: relative;
    right: 1%;
}

.table_one{
    width: 10%;
    position: relative;
    left: 40%;
}

#table_two{
    position: relative;
    left: -15%;
    width: 20%;
}

.Table_Entregue{
  position: relative;
  left: -5px;
}

#test{
  padding: 1%;
  width: 40%;
}
.cor{
  background-color: ;
}
.um{
  position: relative;
  width: 100%;
  /*left: 15%;*/
/*}*/

td{
  font-weight:bold;
}

/*.hello{
  position: relative;
  width: 50%;
  left: 40%;
}*/
/*.status{
  width: 10%;
}*/
th{
  width: 20%;
}
/*@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}*/

/*.teste{
  float: left;
}*/


/* primeira imagem: https://forum.imasters.com.br/uploads/monthly_2017_11/teste.png.b6f5fec47f6928c3deb248244f50f8a2.png */
/*Segunda e ultima: https://forum.imasters.com.br/uploads/monthly_2017_11/cinza1.png.37adeed1167239d1681b644c01203ba6.png */
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container">
        <div class="row nospace">

            <div class="col-xs-4 col-md-4 col-sm-4">
                <a href="PostagemTeste.html">
                    <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"> <span class="post">Postagem</span>
                </a>
            </div>

            <div class="col-xs-4 col-md-4 col-sm-4">
              <a href="#">
                  <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"><span class="viagem">Viagem</span>
              </a>
          </div>

            <div class="col-xs-4 col-md-4 col-sm-4">
                <a href="EntregueCerto.html">
                    <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"><span class="entregue">Entregue</span>
              </a>
            </div>

    </div>
    </div>



    <div class="container">
      <div class="table-responsive">
          <table class="table" width="100px" align="center">
              <thead>
                  <tr>

                        <th class="cor">Status:</th>

                  </tr>
              </thead>


        </table>
      </div>
    </div>


      <div class="container">
        <div class="table-responsive">
            <table class="table" width="100px" align="center">
                <thead>
                    <tr class="cliente">
                          <th class="cor">Quantidade</th>
                          <!-- <td>1</td> -->
                    </tr>
                    <tr class="clientess">
                          <th class="cor">Nº.Pedido</th>

                    </tr>
                    <tr class="fiscal">
                          <th class="cor">Nota Fiscal</th>
                          <!-- <td>5874</td> -->
                    </tr>
                    <tr class="entprevista">
                          <th class="cor">Entrega Prevista</th>
                          <!-- <td>12-12-2017</td> -->
                    </tr>

                </thead>
          </table>
        </div>
      </div>

0
0

Necessita usar os ul e li? Porque não assim:

<div class="row">
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></div>
    </div>
</div>
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></div>
    </div>
</div>
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></div>
    </div>
</div>

2
  • Ainda assim quando eu diminuo a tela, as imagens estão ficando uma por cima da outra
    – Maria
    3/11/2017 às 13:06
  • Nesse caso o problema esta no css aplicado as imagens. Ou nos left e right do css que postou. 3/11/2017 às 13:11

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 .