Comment mettre en œuvre sensible, indépendamment de défilement volets dans le Bootstrap 3?

Je travaille sur une application web pour laquelle je veux avoir deux indépendamment de défilement des zones sur des écrans plus grands: une zone de contenu principale sur la gauche, et une petite barre latérale sur la droite.

J'ai réussi à mettre en œuvre une telle mise en page en CSS à l'aide absolute de positionnement et de overflow propriétés, voir ce JSFiddle: http://jsfiddle.net/XLceP/

C'est grand, cependant, je vais aussi tenter de rendre l'utilisation de Bootstrap (3.1.1) afin de rendre le site responsive et pour les composants/style. Cependant, je suis à une perte sur la façon de le faire.

En gros, je serais l'idéal à utiliser Bootstrap conventions (la colonne de classes, etc.) pour faire en sorte que les écrans mobiles le volet de droite s'effondre ci-dessous le volet de gauche (ou disparaît complètement) pour un classique de la disposition verticale, avec à la fois de prendre toute la largeur. Cependant, il semble impossible de le faire en utilisant absolute de positionnement pour le plus grand écran de mise en page.

Comment puis-je essayer de s'attaquer à ce problème?

OriginalL'auteur Inkling | 2014-03-31

  1. 8

    Vous pouvez utiliser un CSS media query pour "désactiver" le positionnement absolu sur les écrans des mobiles. Cela vous permettra de Bootstrap réactivité du coup de pied dans...

    @media (min-width: 768px){
  #left {
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    width: 75%;
    overflow-y: scroll; 
  }

  #right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow-y: scroll;
    width: 25%;
  }
}

    Démo: http://www.bootply.com/126137

    Merci, cela efface les choses pour moi. J'avais également besoin de s'assurer overflow: hidden sur body, html était dans la requête de média trop sinon je ne serais pas capable de faire défiler normalement une fois qu'elles se sont effondrées, ainsi que height: 100% car qui provoque également des problèmes.
    Mais si j'ai besoin de 3 colonnes?

    OriginalL'auteur Zim

  2. 4

    Je bifurquais Skelly est bootply ici tout en utilisant col-xs-12 et hidden-xs.

      <div class="col-xs-12 col-sm-6" id="left">
      <p>Left contents</p>
  </div>   
  <div class="hidden-xs col-sm-6" id="right">
      <p>Right contents</p>
  </div>

    Je préfère cela, car il évite les requêtes de média dans un fichier css.

    Grand il a travaillé. Il peut être fait avec les positions des valeurs !!!!

    OriginalL'auteur David Braun

  3. 2

    Vous n'avez pas besoin de Bootstrap pour faire ce que vous voulez. Vous pouvez simplement modifier votre CSS suivant:

    #left {
  float: left;
  width: 75%;
  height: 100px;
  overflow-y: scroll;
  background-color: #FC6E51;
  text-align: center;
}

#right {
  float: left;
  overflow-y: scroll;
  height: 100px;
  width: 25%;
  background-color: #4FC1E9;
  text-align: center;
}

    Et puis, dans votre requête de support pour les écrans mobiles, de rendre les deux #et gauche #droite de flux:aucun, width: 100% et height: auto;

    Si vous voulez vraiment utiliser Bootstrap, il suffit de mettre les deux #et gauche #droite dans la structure suivante:

    <div class="row">
    <div class="col-md-8" id="left">Your Code Here</div>
    <div class="col-md-4" id="right">Your Code Here</div>
</div>

    OriginalL'auteur Yunzhou