html - 如何创建不占据整个屏幕的导航栏折叠？

Question

我正在尝试在 Bootstrap 中创建一个可折叠的导航栏。现在它看起来像这张图:

我想要的是下拉菜单只有固定宽度(不占据整个屏幕)，位于右侧而不是左侧，并使文本在垂直方向上很好地居中菜单项。我怎样才能做到这一点？

我有一些额外的 CSS 覆盖了 Bootstraps 的默认值，来自 boostrap.min.css。与导航栏有关的部分复制如下:

.navbar-default {
    padding: 10px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
    font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
}

.navbar-toggle { /* the toggle is the thing seen on mobile */
    border: 0;
    margin-top: 0px;
    background-color: #{{ site.data.template.color.primary }};
}

/* Using navbar-toggle alone here isn't specific enough for reasons that are
 unclear to me, since I use only navbar-toggle above.
 https://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:active {
    background-color: #{{ site.data.template.color.secondary }};
}

.navbar-default .nav li a { /* the buttons in the navbar */
    height: 40px;
    line-height: 0px;
    text-transform: uppercase;
    font-family: {{ site.data.template.font.primary }};
    font-weight: bold;
    letter-spacing: 1px;
    color: #fff;
}

.navbar-default .nav li a:hover {
    color: #{{ site.data.template.color.primary }};
}

.navbar-default .nav>.active>a:focus {
    background-color: #{{ site.data.template.color.primary }};
}

.navbar-default .nav>.active>a:hover {
    background-color: #{{ site.data.template.color.secondary }};
}

.navbar-default .navbar-nav>.active>a {
    border-radius: 3px;
    background-color: #{{ site.data.template.color.primary }};
}

.navbar-default.navbar-shrink { /* This sets the background dark below the welcome */
    padding: 10px 0;
    background-color: #222;
}

.navbar-brand { /* this keeps the buttons from getting larger below the welcome */
    font-size: 1.5em;
}

@media(max-width:768px) {
    .navbar-collapse {
        width: 120px;
    }

    .navbar-collapse li a {
        background-color: #222;
    }
}

这是标题html

<!-- Navigation -->
<nav class="navbar navbar-default navbar-default-color navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <div class="col-md-12">
                <ul class="list-inline social-buttons">
                    {% for link in site.social %}
                    <li><a href="{{ link.url }}"><i class="{{ link.icon }}"></i></a></li>
                    {% endfor %}
                </ul>
            </div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="menu">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden"><a href="#welcome"></a></li>
                <li><a class="page-scroll" href="#about">About</a></li>
                <li><a class="page-scroll" href="#projects">Projects</a></li>
                <li><a class="page-scroll" href="#writing">Writing</a></li>
                <li><a class="page-scroll" href="#contact">Contact</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Answer 1

注意:我使用了内联 css 样式标签，您应该将该代码放在 style.css 文件中，并为导航栏的汉堡图标出现的正确断点添加 css 媒体查询。

您还应该在您的问题中添加 bootstrap、jquery cdn 等并准备好，以便我们可以快速给出答案。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Navigation -->
<div class="container">
    <nav class="navbar navbar-default navbar-default-color navbar-fixed-top">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <div class="col-md-12">
                <ul class="list-inline social-buttons">

                    <li>
                        <a href="{{ link.url }}">
                            <i class="{{ link.icon }}"></i>
                        </a>
                    </li>

                </ul>
            </div>

            <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <!-- /.navbar-collapse -->

        <!-- /.container-fluid -->
    </nav>
    <div class="collapse navbar-collapse navbar-default-color" id="menu" style="margin-top: 61px; float: right;">
        <ul class="nav navbar-nav navbar-right">
            <li class="hidden">
                <a href="#welcome"></a>
            </li>
            <li>
                <a class="page-scroll" href="#about">About</a>
            </li>
            <li>
                <a class="page-scroll" href="#projects">Projects</a>
            </li>
            <li>
                <a class="page-scroll" href="#writing">Writing</a>
            </li>
            <li>
                <a class="page-scroll" href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>