Problems with bootstrap grid system

Asked

Viewed 151 times

1

Guys, I’m having a problem with the bootstrap grid system, I don’t know why, but when I resize the site to the size of a device, it doesn’t fit properly.. Any suggestion?

inserir a descrição da imagem aqui

HTML:

    <html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Anuncie Já - Nossos Planos</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="css-anuncio/style-planos.css" rel="stylesheet">
</head>
<body>
    <?php
        include 'menu.php';
    ?>
    <div class="container">
        <div class="row">
            <h1 id="titulo-h1">Anuncie vaga de emprego</h1>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">   
                <div class="planos_simples">
                    <p>Recomendado</p>
                </div>
                <div class="planos_simples_detalhes">
                    <h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
                    <h1>DESTAQUE
                        <span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
                    </h1>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
                    <button type="button" class="botao_mensal" id="criarConta">
                        CONTRATAR
                    </button>
                </div>
            </div>  

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">   
                    <div class="plano_premium">
                        <p>Recomendado</p>
                    </div>
                <div class="plano_premium_detalhes">
                    <h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
                    <h1>DESTAQUE
                        <span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
                    </h1>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
                    <button type="button" class="botao_semanal" id="criarConta">
                        CONTRATAR
                    </button>
                </div>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">   
                    <div class="plano_anuncio">
                        <p>Recomendado</p>
                    </div>
                <div class="plano_anuncio_detalhes">
                    <h6>Plano <span style="font-weight: bold;">Mensal</span></h6>
                    <h1>DESTAQUE
                        <span class="glyphicon glyphicon-arrow-right"> <span style="font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;">R$189</span> <span class="glyphicon glyphicon-arrow-left">
                    </h1>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Duração Ilimitada</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Anuncio destacado</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Prioridade na busca de oportunidades</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Receba um aviso por cada interesse na vaga</p>
                    <p><span class="glyphicon glyphicon-ok-circle" style="color: green;"></span> Sem limitações de anuncios por mês</p>
                    <button type="button" class="botao_anuncio" id="criarConta">
                        CONTRATAR
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

2 answers

0


Here the same thing happened with your code. the problem is that the bootstrap.css file must be corrupted. I decided to download it again, downloaded version 3.3.7 or use the CDN

<!-- Latest compiled and minified CSS -->

  • I’ve been making some changes to it, that must have been it, download it again and get in touch, thanks!

  • Working out, give a like in response !

0

I tested here on my computer. As your bootstrap is local I had to add in the head that line to apply:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

And it was adjusting correctly. So probably the problem is in bootstrap. Test the code again by placing this line I copied here below the import of your bootstrap to overwrite or comment on the old import.

  • I’ve been making some changes to it, that must have been it, download it again and get in touch, thanks

Browser other questions tagged

You are not signed in. Login or sign up in order to post.