3

Estou desenvolvendo um site e o grid do bootstrap não está funcionando... o MD e o SM estão funcionando corretamente, porém quando vou testar a responsividade do site o XL não funciona.. as imagens ficam uma embaixo das outras ao invés de ficar duas por linha.

  <div class="container">
<h2>Parceiros</h2>
<div class="row">

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/1.png" alt="" class="img-fluid"></div>
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/2.png" alt="" class="img-fluid"></div>

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/4.png" alt="" class="img-fluid"></div>
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/5.png" alt="" class="img-fluid"></div>

    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="img/parceiros/3.png" alt="" class="img-fluid"></div>             
    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="img/parceiros/6.png" alt="" class="img-fluid"></div>                

</div>
3
  • Coloque o Seu HTML, inclusive com a <head> e se está usando algum CSS além do do Bootstrap
    – hugocsl
    16/01/2018 às 13:33
  • Você quererá dizer XS em vez de XL? Qual a largura das imagens. Veja a minha resposta 16/01/2018 às 13:47
  • Galera consegui aqui.. Realmente eu abri um arquivo css do bootstrap e copiei a parte do xs e colei no meu css e já está tudo resolido.. valeu! 16/01/2018 às 15:41

3 Respostas 3

3

Poderá adicionar a classe col-lg-* para ecrãs com largura superior a 1200px.

Se for o XS que não funciona, o problema poderá estar relacionado com a dimensão das imagens. Se a largura da imagem for superior ao tamanho da coluna, a coluna irá aumentar de tamanho, a menos que defina o overflow como hidden.

Simplificando, nas tags <img> deverá adicionar a classe img-responsivepara uma melhor adaptação das imagens aos diferentes tamanhos de ecrã, independentemente da dimensão das mesmas.

3

Você deve utilizar o Bootstrap 4 pra usar os sufixos classes -xl . Ainda, você deve observar se as outras classes adicionadas ao elemento (wow e bounceInLeft) não possuem atributos CSS como float e display que modificam a exibição, causando esse deslocamento.

4
3

Lucas acho que vc está se confundindo um pouco entre as Classes do Bootstrap3 e Bootstrap4, a culpa não é sua, pq as vezes pesquisamos no Google e clicamos no link sem percebemos na Documentação de qual estamos 3 ou 4... Seria interessante vc incluir o <head> do seu site na pergunta.

Por exemplo class="img-fluid" que é do BS4 no BS3 seria class="img-responsive"

Com Bootstrap 4: Execute o Snippet como "Página Toda"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name=
 content=
>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
        <div class="container">
                <h2>Parceiros</h2>
                <div class="row">
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
        
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>             
                    <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-fluid"></div>                
                </div>
            </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>


Com Bootstrap 3: Execute o Snippet como "Página Toda"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    
</style>
</head>
<body>
    
    <div class="container">
        <h2>Parceiros</h2>
        <div class="row">
            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>

            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>
            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInLeft'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>             
            <div class='col-xs-6 col-sm-2 col-md-2 wow bounceInRight'><img src="http://placecage.com/300/300" alt="" class="img-responsive"></div>                
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

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 .