web-dev-qa-db-fra.com

Bootstrap grid with wrapper fixed - Empêche les colonnes de s'empiler

Comme le titre l'indique, j'essaie d'utiliser Bootstrap 3 système de grille avec un wrapper fixe. Mais quand je redimensionne le navigateur, les colonnes s'empilent même si le wrapper reste de la même taille?

BTW: J'utilise la version 3 pour pouvoir passer à une mise en page réactive après avoir porté le site. (Ce qui est énorme et je suis seul, donc étape par étape est la seule option ...)

    <!DOCTYPE html>
    <html>
      <head>
        <title>Bootstrap 101 Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="../../assets/js/html5shiv.js"></script>
          <script src="../../assets/js/respond.min.js"></script>
        <![endif]-->

        <style>
                /* Custom container */
                .container-fixed {
                  margin: 0 auto;
                  max-width: 800px;
                  min-width: 800px;
                  width: 800px;
                                      background-color:#C05659;
                }
                .container-fixed > hr {
                  margin: 30px 0;
                }
        </style>
      </head>
      <body>
            <div class="container-fixed">
                <div class="row">
                  <div class="col-md-4">.col-md-4</div>
                  <div class="col-md-4">.col-md-4</div>
                  <div class="col-md-4">.col-md-4</div>
                </div>
                <hr>
            </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
      </body>
    </html>
csstwitter-bootstrapgridweb-deploymenttwitter-bootstrap-3
21
stare

Les cols sm, md, lg, etc. encapsulent/empilent de manière réactive. Utilisez le non empilable col-xs-* classe ...

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

Démo: http://bootply.com/80085

EDIT: Bootstrap 4 , le xs n'a plus besoin d'être spécifié.

<div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div>
53
Zim