L'affixe Bootstrap ne fonctionne pas avec la classe bootstrap

Je suis relativement nouveau à l'amorçage et d'essayer de la conception de ma page avec bootstrap apposer. Ici, dans le code Lorsque je supprime mon col-lg-6 classe est situé à l'intérieur d'apposer ciblées div, il fonctionne parfaitement bien, mais cela ne fonctionne pas avec chaque classe de bootstrap est appliquée. J'ai essayé après la suppression de la classe particulière, à ce moment, il fonctionne exactement amende.

<body id="top" data-spy="scroll" data-target="#header">
  <header id="header" style="background-position: 0% 0px;">
    <a class="image avatar" style="cursor: pointer;">
      <img src="resources/images/Nimesh.jpg" alt=""></a>
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>

    <ul class="nav nav-tabs nav-stacked" data-spy="affix">
      <li class="active"><a href="#section-1">Section One</a></li>
      <li><a href="#section-2">Section Two</a></li>
      <li><a href="#section-3">Section Three</a></li>
      <li><a href="#section-4">Section Four</a></li>
      <li><a href="#section-5">Section Five</a></li>
    </ul>

  </header>

  <div id="profileImage">

  </div>

  <div id="main">
    <div id="section-1" class="background">
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
    </div>

    <div id="section-2" class="background">
      <div class="col-lg-6">
        <!--content 2a  -->
      </div>
      <div class="col-lg-6">
        <!--content 2b  -->
      </div>
    </div>

    <div id="section-3" class="background">
      <div class="col-lg-6">
        <!--content 3a  -->
      </div>
      <div class="col-lg-6">
        <!--content 3b  -->
      </div>
    </div>

    <div id="section-4" class="background">
      <div class="col-lg-6">
        <!--content 4a  -->
      </div>
      <div class="col-lg-6">
        <!--content 4b  -->
      </div>
    </div>

    <div id="section-5" class="background">
      <div class="col-lg-6">
        <!--content 5a  -->
      </div>
      <div class="col-lg-6">
        <!--content 5b  -->
      </div>
    </div>
  </div>
</body>

source d'informationauteur Nimesh | 2015-04-02

  1. 18

    Cette question pouvait être décomposé en 2 parties:

    1. D'utiliser Bootstrap Système de Grille (par exemple, col-lg-6)
    2. D'utiliser Bootstrap Apposer votre secions

    1. Bootstrap Système De Grille

    Pour rendre le système de réseau fonctionne correctement, 3 classes sont nécessaires: .container.row.col-xs-*.

    • .container: Devrait être ajouter à l'enveloppe de votre document.
    • .row: si vous souhaitez configurer les colonnes, vous avez de l'envelopper ces colonnes avec un .row wrapper.
    • .col-xs-*: C'est là que vous pouvez définir la largeur de votre contenu.

    Si votre document doit être quelque chose comme ceci:

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

    Le document pour le système de grille est ici.

    Dans votre cas, il semble que vous ne fournissez pas .row ni .container pour votre colonnes, de sorte que le réel de mises en page serait cassée et inattendu à un certain degré. Je pense que c'est probablement la raison pour laquelle si vous supprimez ceux col-lg-* classes qu'il fonctionne comme vous le souhaitez.

    2. Bootstrap Apposer

    La document officiel pour Apposer est assez vague en fait. Fondamentalement, lorsque vous faites défiler vers le bas de votre document, les <div data-spy="affix"> élément maj des états suivants:

    1. Ajouter .affix-top à votre espion élément lorsque la page est chargée
    2. Chaque fois que vous faites défiler jusqu'à la valeur de data-offset-topil va supprimer la .affix-top classe et ajouter un .affix classe pour le même élément.
    3. Chaque fois que vous faites défiler jusqu'à la valeur de data-offset-bottomil va supprimer la .affix classe et ajouter un .affix-bottom classe pour le même élément.

    Que le document mentionné, vous ONT POUR définir les règles css pour ces classes de faire apposer le plugin fonctionne.

    Il y a 3 grandes règles à définir:
    1. La largeur de .affix-top, .affix, .affix-bottom
    2. La position que vous souhaitez pour votre apposer élément lorsqu'il est fixe
    3. Récupérer le .affix-bottom position de fixed à absolute

    De sorte que votre css serait quelque chose comme ceci:

    .affix {
  top: 0;
  width: 100%;
}

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}


    Voici une rude Codepen exemple pour l'utilisation d'apposer. J'ai copié votre code et il fonctionne si vous ajoutez col-lg-6 dans votre article ou pas. Vous pouvez redimensionner la fenêtre pour voir votre 2 colonnes de mise en page.

    Une chose besoin de mentionner, c'est que je ne suis pas tout à fait sûr de savoir pourquoi vous mettez votre apposer élément dans votre en-tête, car il est utilisé pour montrer le titre de la section liste sur la barre latérale dans la plupart des cas de calcul. Avec cela à l'esprit, je le déplacer hors de l'en-tête de la zone principale avec une colonne de réglage de la grille.

    Espère que cela aiderait.