Bootstrap-navigation bar and bootstrap navigation

Bootstrap-navigation bar and bootstrap navigation
Default style navigation bar

A navigation bar is a basic responsive component that serves as the navigation page header in your application or website. They can be folded (and turned off) on mobile devices and gradually become horizontally expanded when the width of the viewport increases.

The navigation bar navigation link aligned at both ends has been discarded.

Element contained in the navigation bar overflows.

Since Bootstrap does not know how much space you need to place the elements in the navigation bar, you may encounter a situation where the content in the navigation bar is broken (that is, the navigation bar occupies two rows ). The solution is as follows:

1. Reduce the width occupied by all elements in the navigation bar.
2. Some elements in the navigation bar are hidden on screens of certain sizes (using responsive tools.
3. Modify the minimum screen width value that triggers the conversion when the navigation bar is horizontally arranged and folded. You can modify@ Grid-float-breakpointVariable implementation, or rewrite the relevant media query code to overwrite the default value of Bootstrap. Dependent on JavaScript

   If JavaScript is disabled and the viewport is narrow enough, the navigation bar is folded and cannot be opened,. Navbar-collapseThe content contained in.

   Modify the threshold of the view, thus affecting the arrangement mode of the navigation bar.

   When the browser viewport width is smaller@ Grid-float-breakpointWhen the value is greater@ Grid-float-breakpointValue, the elements in the navigation bar are arranged horizontally, that is, the display mode of non-mobile devices is realized. By adjusting the value in the source code, you can control when the navigation bar is stacked and horizontal. The default value is768px(The minimum value of a small screen, or tablet, or tablet ).