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>
javascript jquery html css bootstrap-3

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 javascript jquery html css bootstrap-3

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