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


(amauri) #1

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:

Visualização mobile (col-xs-1)

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