Twitter-bootstrap 3 прикрепил боковую панель, перекрывающую контент при изменении размера окна, а также нижний колонтитул

У меня возникают проблемы с перекрывающейся боковой панелью, когда я использую аффикс для начальной загрузки 3 и изменяю размер окна. Есть ли способ добавить какой-нибудь класс css, чтобы вместо того, чтобы перекрывать столбец, меню прикреплялось вверху?

Также столбец перекрывает нижний колонтитул. Любая помощь будет принята с благодарностью. Похоже, что у многих людей такая же проблема.

Вот HTML:

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

Вот CSS:

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

html css twitter-bootstrap twitter-bootstrap-3 affix
person pwiz    schedule 09.01.2014    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Демо: http://bootply.com/104634

Вы должны применять affix только тогда, когда ширина экрана больше 992 пикселей (точка останова, при которой Bootstrap col-md-* начинает вертикальное наложение).

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

Кроме того, если вы хотите использовать affix на меньшей ширине, вы можете изменить свои столбцы на col-sm-* или col-xs-*.

person Zim    schedule 09.01.2014
comment
Это прекрасно сработало. А как насчет нижнего колонтитула? Боковая панель перекрывает нижний колонтитул. - person pwiz; 09.01.2014
comment
Для этого нужен affix-bottom: bootply.com/104641 - см. Документацию Bootstrap: getbootstrap.com/javascript/#affix для получения дополнительной информации. - person Zim; 10.01.2014
comment
Если это имеет значение, я использую wordpress, поэтому в своей теме я включаю нижний колонтитул. - person pwiz; 10.01.2014
comment
Я очень ценю время, которое вы потратили, помогая мне. Удачного дня, вы мне безмерно помогли. - person pwiz; 10.01.2014

arrow_upward
0
arrow_downward

Я хотел, чтобы аффикс реагировал на изменение размера столбцов, поэтому нашел довольно простое решение.

Что мы сделаем, так это сопоставим ширину нашего аффикса с шириной столбца, в котором он находится, при изменении размера сетки.

Для этого все, что вам нужно сделать, это указать свою колонку и поставить идентификатор. (Или как-то связать элементы с помощью javascript)

Я выбрал решение для javascript.

function fixAffix() {
    try {

        // Bootstrap affix will overflow columns 
        // We'll fix this by matching our affix width to our affixed column width
        var bb = document.getElementById('affixColumn').getBoundingClientRect(),
            columnWidth = bb.right - bb.left;

        // Make sure affix is not past this width.
        var affixElm = document.getElementById('affixDiv');
        affixElm.style.width = (columnWidth - 30) + "px";

        // We can also define the breakpoint we want to stop applying affix pretty easily
        if (document.documentElement.clientWidth < 975) 
            affixElm.className = "";
        else
            affixElm.className = "affix";

    }
    catch (err) {
        alert(err);
    }
}



$(window).resize(function () {
       fixAffix();
   });

$(document).ready(function () {
    fixAffix();
});

Я включил код для удаления аффикса в указанных точках останова. Это характерно для моего приложения, но вы, скорее всего, тоже захотите сделать что-то подобное, чтобы остановить аффикс на небольших устройствах.

person clamchoda    schedule 21.02.2019