GRID bootstrap system - col-Xs-X does not recognize width

Asked

Viewed 839 times

0

I am studying bootstrap, and when formulating the GRID system a col recognizes the values LG, MD, SM, but does not recognize the requested XS. When I resize the browser to mobile size it always puts the requested div to size 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>

When resizing to mobile, it displays the following layout:

Browser resized to mobile resolution

Someone to shed some light on what I’m doing wrong?

A print with the full code, and the three forms of visualization:inserir a descrição da imagem aquiFull code and 3 ways to view As you can see, everything is fine, except in COL XS. (I didn’t print LG because I didn’t have space in the same print)

html bootstrap front-end grid responsive

  • What version of Bootstrap you are using ?

  • I’m using the 4.0.

3 answers

0


Reading the documentation you will see that there has been a change, it has been simplified rather than col-xs-N now you can just col or col-N, see below:

In this example, we create 4 columns informing on the attribute class the value col, see they are on the same line because the value has been divided among themselves.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
        <style>
            .c{
                background-color:aquamarine;
                border-right:1px solid black;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 1</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 2</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 3</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col">Esp 4</div>
        </div>
    </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

For some reason the Snippet does not work here in the Sopt but I put the Print and can test that it works.

Usando col

In this other example we inform a value N for col

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
        <style>
            .c{
                background-color:aquamarine;
                border-right:1px solid black;
            }
        </style>
    </head>
    <body>
    <div class="container">
        <div class="row">
            <div class="c col-lg-12 col-md-12 col-sm-6 col-2">Esp 1</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-2">Esp 2</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-8">Esp 3</div>
            <div class="c col-lg-12 col-md-12 col-sm-6 col-12">Esp 4</div>
        </div>
    </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>
The First and Second column will occupy 2 spaces in the Grid, and the Third will occupy 8 spaces, and finally the Fourth column that will occupy 12 spaces in the Grid.

For some reason the Snippet does not work here in the Sopt but I put the Print and can test that it works.

Usando col-N

Reference

0

Hello, the way it should work. See your code running. https://codepen.io/mjunior/pen/zEQPpb?editors=1100

You may not have specified the metatag viewport in your html.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  • Exactly, it was supposed to be working =/ . But why is not the X of the question. I used the metatag viewport as follows: "<meta name="viewport" content="width=device-width, initial-Scale=1>". I’ll try to add the code provided, but I honestly don’t think that’s the reason he doesn’t recognize COL XS. Later put the results

  • I added as shown in the last print, the rest of the codeline. And no result.

0

You have to look for this resizing, in the sense that it is even resizing to mobile, because you may be resizing to tablet, where the tablet uses the Sm class.

Furthermore, there is a class 'c' before the measurements. Is that correct? You actually have this class (capitalized)?

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

Here’s an article that might help.

  • I tested the code in 4 resolutions, which would be related to the 4 possible cols, LG, MD, SM and XS, the sent print is related to the recognized solution as XS. And yes, the C class is correct, in the code itself describes the goal of the same, only to change the background color of the Divs, and make the view clearer.

Browser other questions tagged html bootstrap front-end grid responsive

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