bootstrap - navigation bar

Default style navigation bar

Navigation bar is a responsive basic component that serves as the navigation header in your app or website. They collapse (and can be opened and closed) on mobile devices and gradually expand horizontally as the viewport width increases.

Aligned navigation bar navigation links have been deprecated.

The elements contained in the navigation bar overflow

Since Bootstrap does not know how wide the space you place in the navigation bar needs to be, you may encounter a situation where the content in the navigation bar wraps (that is, the navigation bar occupies two lines). The solution is as follows:

1. Reduce the width occupied by all elements in the navigation bar.
2. Hide some elements within the navigation bar on certain screen sizes (using the Responsive Utility class).
3. Modify the minimum screen width value that triggers the conversion between the horizontal arrangement and the folded arrangement of the navigation bar. This can be achieved by modifying the @grid-float-breakpoint variable, or by rewriting the relevant media query code yourself to override Bootstrap's default value.

   Depends on JavaScript

   If JavaScript is disabled and the viewport is narrow enough to cause the navigation bar to collapse, the navigation bar will not be opened and the content contained within .navbar-collapse will not be visible.

   Modify the threshold of the viewport, thereby affecting the arrangement mode of the navigation bar

   When the width of the browser viewport (viewport) is less than the @grid-float-breakpoint value, the elements inside the navigation bar become folded, which is transformed into the mobile device display mode; when the browser viewport (viewport) When the width is greater than the @grid-float-breakpoint value, the elements inside the navigation bar become horizontally arranged, that is, it is transformed into a non-mobile device display mode. By adjusting this value in the source code, you can control when the navigation bars are stacked and when they are arranged horizontally. The default value is 768px (the minimum value for small screens - or tablets).