以特定宽度显示＃navbar.collapse.in

Question

我想要显示的导航栏不是整页宽度，而是只有25％...当我点击切换导航状态的按钮时，导航高度似乎只会增长。我想制作另一个div并设置它的高度=＃navbar.collapse.in的高度，位置相同，但页面宽度为25％。怎么做到呢？导航代码：

<nav class="navbar navbar-fixed-top navbar-dark bg-faded">
<div class="navbar-header">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
</div>
<div class="collapse" id="navbar">
    <ul class="nav navbar-nav">
        <div class="row">
            <li class="nav-item"><div class="navbar-brand"><a href="#"><span id="navbar1"></span><a></div></li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar2"></span></a>
            </li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar3"></span></a>
            </li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar4"></span></a>
            </li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar5"></span></a>
            </li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar6"></span></a>
            </li>
        </div>
        <div class="row">
            <li class="nav-item">
                <a class="nav-link" href="#"><span id="navbar7"></span></a>
            </li>
        </div>
    </ul>
</div>