Bootstrap affix не работает с классом bootstrap

Я относительно новичок в бутстрапе и пытаюсь создать свою страницу с помощью ассемблера bootstrap. Здесь, в коде Когда я удаляю свой класс col-lg-6 из того, что находится внутри аффиксированного целевого div, он отлично работает, но он не работает с заданным классом bootstrap. Я попытался удалить этот класс в тот момент, когда он работает точно.

<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>

Ответы

Ответ 1

Эти вопросы можно разбить на две части:

  • Чтобы использовать Систему сетки Bootstrap (например, col-lg-6)
  • Использовать Bootstrap Affix со своими secions


1. Система загрузки Bootstrap

Чтобы система сетки работала правильно, требуются 3 класса: .container, .row, .col-xs-*.

  • .container: следует добавить в оболочку вашего документа.
  • .row: когда вы хотите настроить столбцы, вы должны обернуть эти столбцы оболочкой .row.
  • .col-xs-*: Здесь вы можете установить ширину вашего содержимого.

Итак, ваш документ должен выглядеть примерно так:

<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>

Документ для системы сетки здесь.

В вашем случае кажется, что вы не указали .row и .container для своих столбцов, поэтому фактические макеты будут в какой-то степени сломаны и неожиданны. Я думаю, что это, вероятно, причина, почему, если вы удаляете те классы col-lg-*, она работает так, как вы хотите.


2. Bootstrap Affix

Официальный документ для Affix на самом деле довольно расплывчатый. В принципе, когда вы прокручиваете документ вниз, элемент <div data-spy="affix"> будет перемещаться из следующих состояний:

  • Добавьте .affix-top к вашему элементу шпиона при загрузке страницы
  • Всякий раз, когда вы переходите к значению data-offset-top, он удаляет класс .affix-top и добавляет класс .affix к тому же элементу.
  • Всякий раз, когда вы переходите к значению data-offset-bottom, он удаляет класс .affix и добавляет класс .affix-bottom к тому же элементу.

Как указано в документе, вы должны установить правила CSS для этих классов, чтобы сделать плагин аффикса.

Существует 3 важных правила: 1. Ширина .affix-top, .affix, .affix-bottom 2. Позиция, которую вы хотите для своего аффикс-элемента, когда он исправлен 3. Восстановите положение .affix-bottom с fixed до absolute

Итак, ваш css будет примерно таким:

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

.affix-top {
  width: 100%;
}

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


Вот пример Codepen для использования аффикса. Я скопировал ваши коды, и он работает, добавляете ли вы col-lg-6 в свой раздел или нет. Вы можете изменить размер окна, чтобы увидеть расположение двух столбцов.

Следует отметить, что я не совсем уверен, почему вы помещаете свой аффикс-элемент в свой заголовок, поскольку он используется для отображения списка заголовков разделов на боковой панели в большинстве случаев проектирования. В этом смысле я перемещаю его из заголовка в основную область с настройкой столбца в сетке.

Надеюсь, это поможет.