Sistema de GRID bootstrap - col-xs-X não reconhece largura

25/10/2017

8

Estou estudando bootstrap, e ao formular o sistema de GRID a col reconhece os valores LG, MD, SM, mas não reconhece o XS solicitado. Quando redimensiono o navegador para tamanho mobile ele sempre coloca a div solicitada em tamanho 12 (full).

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Bill Turner</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/estilo.css" rel="stylesheet" media="screen">  
</head>   
<style>
    .c{
        background-color:aquamarine;
        border-right:1px solid black;
    }
</style>
<body>
    <div class="container">

        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-xs-1">
                esp
            </div>

        </div>

    </div>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script> 
</body>


Ao redimensionar para mobile,ele apresenta o seguinte layout:

[url:descricao=Visualização mobile (col-xs-1)]https://prnt.sc/h126dt[/url]

Alguém para me dar uma luz sobre o que estou fazendo de errado?
Responder

Posts

25/10/2017

Felipe Morais

Bom dia, Amauri

A estrutura do seu HTML não está totalmente de acordo com o padrão estipulado pelo Bootstrap. Recomendo uma breve olhada neste link e adequar seu código.

Outra coisa, nos exemplos de template fornecidos pelo próprio Bootstrap, as classes de Grid são definidas na forma inversa (embora eu acredito que a razão não seja esta, visto que a ordem das classes não alteram a renderização). Veja neste link os diferentes modos de Grid.

Espero ter ajudado!
Responder
A fulga no padrão do HTML não interfere no problema em questão. Consegui a resposta em um outro forum, a questão é que no BOOTSTRAP 4.0 a classe col-xs-X foi substituida pela classe (simplificada) "COL-X".
Responder
×
+1 DevUP
Acesso diário, +1 DevUP
Parabéns, você está investindo na sua carreira