boostrap 4 alpha Does not work grids

Navigation
1

I have the following code: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="shortcut icon" href="./Recursos/imagenes/favicon.png" />
  <link rel="stylesheet" href="./Recursos/css/style-login.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


  <title>Document</title>
</head>

<body>


  <div class="container">
    <div class="row">
      <div class="col-xs-4">col-xs-4</div>
      <div class="col-xs-4">col-xs-4</div>
      <div class="col-xs-4">col-xs-4</div>
    </div>
  </div>


  <!-- ****************************************************************** -->
  <script src="./Librerias/jquery/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="./Vista/Login/index.js"></script>
</body>

</html>

I do not know what I'm doing wrong, the console appears all right and in view it does not apply the grids, it puts all the texts together.

    
asked by dkboxfine 16.09.2017 в 04:55
source

1 answer

1

In Bootstrap 4, the class definition extra small disappears ( col-xs-* ) and remains only as the default column definition ( col-* ). You can see it in the Bootstrap 4 documentation for the grid system .

Right now your columns have the class col-xs-4 that does not exist in Bootstrap 4, change the class to col-4 and it works: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="shortcut icon" href="./Recursos/imagenes/favicon.png" />
  <link rel="stylesheet" href="./Recursos/css/style-login.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">


  <title>Document</title>
</head>

<body>


  <div class="container">
    <div class="row">
      <div class="col-4">col-xs-4</div>
      <div class="col-4">col-xs-4</div>
      <div class="col-4">col-xs-4</div>
    </div>
  </div>


  <!-- ****************************************************************** -->
  <script src="./Librerias/jquery/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="./Vista/Login/index.js"></script>
</body>

</html>
    
answered by 16.09.2017 в 05:46
access the database of a php application on a server lin Make a div appear / disappear when I scroll