简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Bar navigasi Bootstrap adalah tambahan 20px yang tidak dapat dijelaskan, apa yang berlaku?
为情所困
为情所困 2017-07-05 10:42:51
0
3
865

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html</title>
    <link rel="stylesheet" href="./rule/bootstrap-Normalize.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <p class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <p class="navbar-header">
                <button type="button" class="navbar-toggle collapase" data-toggle="collapase" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </p>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <p class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only"></span></a>Link</li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li><a role="separator" href="#"></a></li>
                            <li><a href="#">Separated link</a></li>
                            <li><a role="separator" href="#"></a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </p>
        </p>
    </nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include inpidual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="main.js">
    </script>
</body>
</html>
为情所困
为情所困

membalas semua(3)
習慣沉默
習慣沉默2017-07-05 10:44:51 Tingkat 3

Ini kerana bar navigasi Bootstrap hanya 51px tinggi secara lalai, dan tidak selalunya 51px tinggi Jika terdapat berbilang baris elemen di dalamnya, ketinggian akan dinaikkan.

Dalam demo anda, kerana satu label mempunyai pautan tambahan, keseluruhan bar navigasi dinaikkan sebanyak 20px.

Suka +0
Tambah Balasan
某草草
某草草2017-07-05 10:44:51 Tingkat 2

Adakah ia disediakan oleh rangka kerja Marign:0 atau padding:0 tidak sah

Suka +0
Tambah Balasan
代言
代言2017-07-05 10:44:51 Tingkat 1

Anda boleh mencari bar navigasi dalam pepohon DOM konsol, dan kemudian padamkan elemen satu demi satu dari dalam ke luar untuk mengetahui elemen mana yang menyebabkan masalah

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！