How can I disable Bootstrap's “affix” on smaller screens?

后端 未结 2 1320
广开言路
广开言路 2021-02-01 03:20

I\'m using the affix component in a site for a navbar and would like to disable it on smaller screens. I\'m using the jquery method vs. the data and can\'t figure out how to tur

相关标签:
2条回答
  • 2021-02-01 03:39

    You can do it the same way like they do on the Bootstrap page, with CSS alone. Use @media queries to detect the screen size and don't set the position to fixed if the screen is below a certain size. For example:

    @media (min-width: 768px) {
        .affix {
            position: fixed;
        }
    }
    

    This rule will only have an effect if the screen width is more than 768px.

    You can also do it vice versa, set the element's position explicitly to static if the screen has smaller than a certain size:

    @media (max-width: 767px) {
        .affix {
            position: static;
        }
    }
    
    0 讨论(0)
  • 2021-02-01 03:40

    Correct me if I'm wrong, but try setting if(z <= 767) { to if(z <= 1) { that way it won't re-size? Unless I am missing the point of your question.

    0 讨论(0)
提交回复
热议问题