Bagaimana Saya Boleh Menghalang Bootstrap 3 Navbar Saya daripada Runtuh?

Mencegah Navbar Runtuh dalam Bootstrap 3

Navbar Bootstrap menyediakan cara yang mudah untuk mencipta menu boleh lipat yang disesuaikan dengan saiz skrin yang berbeza. Walau bagaimanapun, dalam senario tertentu, anda mungkin mahu melumpuhkan ciri runtuh untuk memastikan menu kelihatan pada setiap masa.

Penyelesaian

Untuk mengelakkan bar navigasi daripada runtuh, anda boleh mengatasi CSS tertentu sifat:

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

Penjelasan

• Sifat pertama mengatasi kelakuan lalai .runtuh, memaksa menu kekal kelihatan.
• Sifat kedua dan ketiga memastikan bahawa kedua-dua item menu sebelah kiri dan kanan terapung ke kiri, menjajarkannya pada yang sama baris.
• Sifat keempat membetulkan isu kecil dengan penjajaran menu sebelah kanan pada skrin yang lebih kecil.

Kod Contoh

Pertimbangkan kod HTML berikut untuk bar navigasi:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png" />
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

Dengan menggunakan penggantian CSS yang disebutkan di atas, bar navigasi ini tidak akan runtuh lagi, tanpa mengira saiz skrin.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghalang Bootstrap 3 Navbar Saya daripada Runtuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!