Shulou(Shulou.com)05/31 Report--

This article mainly introduces the bootstrap how to set fixed positioning related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will get something after reading this bootstrap how to set fixed positioning article, let's take a look at it.

In bootstrap, you can use the Affix plug-in to set fixed positioning, which can fix any element through a custom attribute data, with the syntax "".

Operating environment of this tutorial: Windows10 system, bootstrap3.3.7 version, DELL G3 computer

How to set fixed position in bootstrap

Fixed positioning-declarative trigger fixed positioning

The Affix plug-in can fix any element, and a relatively simple way is to trigger it through a custom attribute data. It mainly includes two parameters:

1. Data-spy: take the value affix, which means that the element is fixed.

2. Data-offset: integer values, such as 90, indicate that the values of the elements top and bottom are both 90px, which includes two ways: data-offset-top and data-offset-bottom.

Data-offset-top is used to set the distance of the element from the top. For example, 90 indicates that the element is away from the top 90px. When the user drags the scroll bar down from the top, when the scroll distance is greater than 90px, the affix element no longer scrolls and will be pinned to the top of the browser window.

Data-offset-bottom is just the opposite of data-offset-top.

The specific uses are as follows:

Affix element

Set data-offset values separately:

Affix element

Note that scroll monitoring is declared in body.

Note, please check the effect in widescreen mode. According to my test, using declarative, even if the value of data-offset-top is set, it will be invalid. You need to set a top value for affix in the style, which is equal to the data-offset-top value. Same as data-offset-bottom.

This is the end of the article on "how to set a fixed position in bootstrap". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to set a fixed position in bootstrap". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.