Html 如何创建不带'；你不占整个屏幕吗？

我试图在引导中创建一个可折叠的导航栏。现在看起来像这张照片：

我想要的是下拉列表只有一个固定的宽度（不占据整个屏幕），位于右侧而不是左侧，并且在菜单项内将文本垂直居中。我怎样才能做到这一点

我有一些额外的CSS，它覆盖boostrap.min.CSS中引导的默认值。与导航栏相关的部分复制如下：

.navbar默认值{
填充：10px0；
-webkit转换：padding.3s；
-moz转换：padding.3s；
过渡：填充。3s；
字体系列：“考山文字”，“新海尔维提卡”，海尔维提卡，Arial，草书；
}
.navbar toggle{/*切换是在移动设备上看到的东西*/
边界：0；
边际上限：0px；
背景色：{{site.data.template.color.primary}；
}
/*这里单独使用导航栏切换不够具体，原因如下：
我不清楚，因为我只使用上面的导航栏切换。
https://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap */
.navbar默认值.navbar切换：悬停，
.navbar默认值.navbar切换：焦点，
.navbar默认值。navbar切换：激活{
背景色：{{site.data.template.color.secondary}；
}
.navbar default.nav li a{/*导航栏中的按钮*/
高度：40px；
线高：0px；
文本转换：大写；
字体系列：{{site.data.template.font.primary}；
字体大小：粗体；
字母间距：1px；
颜色：#fff；
}
.navbar默认值.nav li a:悬停{
颜色：{{site.data.template.color.primary}；
}
.navbar默认值.nav>.active>a:焦点{
背景色：{{site.data.template.color.primary}；
}
.navbar默认值.nav>.active>a:悬停{
背景色：{{site.data.template.color.secondary}；
}
.navbar默认值.navbar nav>.active>a{
边界半径：3px；
背景色：{{site.data.template.color.primary}；
}
.navbar-default.navbar-shrink{/*此选项将背景设置为“欢迎”下方的黑色*/
填充：10px0；
背景色：#222；
}
.navbar品牌{/*这可以防止按钮在欢迎按钮下方变大*/
字号：1.5em；
}
@介质（最大宽度：768px）{
.导航栏倒塌{
宽度：120px；
}
.navbar-li a{
背景色：#222；
}
}

下面是标题html

{site.social%中链接的%s}

{%endfor%}

切换导航

注意：我使用了内联css样式标记，您应该将该代码放入style.css文件中，并添加css媒体查询，以找到导航栏汉堡图标出现的适当断点

另外，您应该在问题中添加引导、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>

切换导航

我发布了这个问题的部分答案，以回答关于将项目移到右侧的更具体问题：

因为我问了这个问题，我更新了引导。在v4中，

nav导航栏

的可折叠菜单仍然如下所示。但是对于

nav

来说，它将所有内容放在一行中，因此宽度更大一些。我认为这是可以接受的

---

要真正不占用整个屏幕宽度，我认为需要使用某种类型的

下拉列表。
谢谢您的回答。我还没试过。我对html、css和javascript（以及jekyll的liquid engine，它可以将一些东西翻译和拼凑在一起）之间的相互作用非常陌生。我不知道为什么这会起作用。你能解释一下吗？你需要什么进一步的信息来让情况更清楚？我没有使用CDN。我在repo中有引导和jquery文件。你可能不想挖掘，但如果你进行回购，那么@pvlkmrv就在这里，为什么你还没有尝试呢？您只需将上述代码复制并粘贴到测试html文件中，然后在web浏览器中打开，上述代码仅适用于移动设备，因此请使用web浏览器开发人员控制台进行mobile view（在浏览器中按F12键并选择mobile view）。当您在mobile view中看到设计时，它符合您想要的问题，所以它是有效的，这就是为什么我粘贴了这个解决方案，如果不尝试这个解决方案就说它有效或者无效，这是不好的。我还要求您提供cdn链接，因为这里的人总是很匆忙，所以最好准备好您的答案，这样其他人就不需要找到引导cdn链接，然后jquery cdn链接，添加它，然后找到解决方案，我希望您理解我的意思：）