Sistema de GRID bootstrap - col-xs-X não reconhece largura
25/10/2017
0
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).
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?
<!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?
Amauri Rodrigues
Curtir tópico
+ 0
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!
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
25/10/2017
Amauri Rodrigues
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
Clique aqui para fazer login e interagir na Comunidade :)