bootstrap 4 -- 导航


故乡的云。上古的玉。随手的诗。十九岁的你


实现效果

  1. 可以居中显示
  2. 小屏幕时可以收缩成按钮菜单
  3. 导航 不等于 导航栏?

html

<div class="all-container">
        <!-- header -->

        <header>

        <div class="container-fluid">
          <div class="header-title">
            <h1 class="text-center">TuClown</h1>
            <p class="text-center">~听说,小丑给了你一朵郁金香~</p>
          </div>



          <nav class="navbar navbar-expand-md navbar-light justify-content-center cl-effect-12">

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" >
                <span class="navbar-toggler-icon" style="color: black;"></span>
            </button>
            <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
                <ul class="navbar-nav mx-auto text-center">
                    <li class="nav-item">
                      <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Archive</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Category</a>
                    </li>

                    <li class="nav-item">
                      <a class="nav-link" href="#">Nav</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Admin</a>
                    </li>
                </ul>
            </div>
        </nav>
        </div>
    </header> 

css

.all-container {
    max-width: 1000px;
    margin: 0 auto;

    color:black;
    font-size: 14px;
}

header {
    padding: 0 0 0 0;
    margin: 0 auto;
}


.main-navigation {
    text-align: center;
    margin-bottom: 35px;
}

header h1 {
    font-size: 50px;
    padding-top: 20px;
    font-weight: 0;
    font-family: 'Pacifico', cursive;
}

header p {
    font-size: 10px;
    color: black;
    margin-bottom: 0;
    padding-bottom:10px;

}

header .header-img {
    text-align: center;
}

header .header-img img {
    width: 100%;
    height: 500px;
}

.container-fluid {
    padding:0;
}

header li {
    /*padding: 5px 10px;*/
    width: 100px;
    text-align: center;
}

header .navbar {
    padding: 0;
    margin: 30px 0;
}

ul {
    color: black;
    padding: 0;
}


header nav {
    margin:30px 0;
}

hr {
    margin: 20px 0 60px 0;
}