Bootstrap-navigation bar and bootstrap navigation

Source: Internet
Author: User

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 ).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.