css - Bootstrap 词缀

Question

我已将词缀应用到我的导航栏容器。我在 xs 和 sm View 上得到了想要的结果，但对于更大的 View 我有一个小问题。附加菜单后，它会扭曲宽度并超出初始容器宽度。有人可以看看我哪里出错了吗？

<div class="container">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h1>
                    <font class="blueH1">This </font><font class="redH1">is </font><font class="yellowH1">my</font><br />
                    <font class="greenH1">header</font>
                </h1>
            </div>
        </div>
    </div>
    <div class="container scrollspy" data-spy="affix" data-offset-top="115">
        <nav class="navbar navbar-default nav-justified">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="yellowNav"><a href="#">Page link1</a></li>
                    <li class="greenNav"><a href="#">Page link2</a></li>
                    <li class="purpleNav"><a href="#">Page link3</a></li>
                    <li class="redNav"><a href="#">Page link4</a></li>
                    <li class="yellowNav"><a href="#">Page link5</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="container">
        <div class="row">
                <div class="mainCopy">
                    <h2>MAIN CONTENT AREA</h2>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                    <p>Some copy</p>
                </div>

        </div>
    </div>

这是我正在使用的 CSS。我必须使用 JS 还是可以用 CSS 解决？

.navbar {
    min-height:10px;
    font-size:22px;
}

.navbar-default {
    background-color:#006EF5;
    color:#ffffff;
    background-image: none;
    background-repeat: no-repeat;
    font-family: 'Neuropol X';
    padding:0px;
    margin:0px;
    font-size:22px;
    border:solid 1px #000000
 }

.navbar-default .navbar-brand {
    color:#ffffff;
    background-color:#006EF5;
    font-family: 'Neuropol X';
    padding:0px;
    margin:5px;
    font-size:22px;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color:#000000;
    background-color:#ffffff;
    font-family: 'Neuropol X';
    padding:0px;
    margin:5px;
    font-size:22px;
}

.navbar-default .navbar-nav > li > a {
    color:#ffffff;
    font-family: 'Neuropol X';
    padding:5px 15px;
    margin:0px;
    font-size:22px;
    text-shadow: 2px 2px #000000;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color:#ffffff;
    background-color:#39A52F;
    font-family: 'Neuropol X';
    padding:5px 15px;
    margin:0px;
    font-size:22px;
    text-shadow: 2px 2px #000000;
}

@media (min-width: 768px) {
    .navbar-nav {
        margin: 0 auto;
        display: table;
        table-layout: auto;
        float: none;
        width: 100%;
        font-size: 16px;
        text-shadow: 2px 2px #000000;
    }
    .navbar-nav > li {
        display: table-cell;
        float: none;
        text-align: center;
        font-size: 16px;
        text-shadow: 2px 2px #000000;
     }
}

.navbar-default .navbar-toggle {
    border: solid 1px #ffffff;
}

.navbar-default .navbar-toggle > a,
.navbar-default .navbar-toggle > a:hover,
.navbar-default .navbar-toggle > a:focus {
    background-color:#006EF5;
}

.navbar-default .navbar-toggle:hover{
    background-color:#006EF5;
}

.navbar-default .navbar-toggle:focus {
    background-color: #006EF5;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}

.affix {
    position:fixed;
    top: 0px;
    width:100%;
}

Answer 1

尝试将导航栏容器包装在词缀代码中，而不是将代码添加到其中。像这样:

<div data-spy="affix" data-offset-top="115">
    <div class="container scrollspy">
        <nav>
            ect...
        </nav>
    </div>
</div>