css - 导航栏折叠(Ipad 菜单)不会在 Bootstrap 中自行展开

Question

我有一个奇怪的问题，我无法解决。尝试了很多不同的东西，但似乎都不起作用。

当我的网站处于折叠模式时 = Ipad 菜单显示时，它看起来很奇怪。我做了一个图像，所以你可以看到它的外观。

嗯，首先它不会自己扩展，它应该做什么？您可以看到菜单项 Destination 在外面。

其次，如何将菜单内容更多地向左移动，以便每一侧都有相同的空白区域？现在看起来很傻:(

在我的 bootstrap.css 文件中，我只做了一些颜色更改。您在此处看到的 Site.css 文件中的导航栏代码:

/*---------------------------------------------*\
  Navbar elements
\*---------------------------------------------*/

.navbar-inverse {
background-color: white;
border-width: 0px;
padding-top: 25px;
font-family: 'Raleway', sans-serif;
font-weight: 100;
}

.navbar-header {
padding-bottom: 30px;
padding-left: 80px;
}

.navbar-header a {
    font-weight: 700;
    vertical-align: baseline;
}

    .navbar-header a:hover {
        color: #003665;
    }

@media (max-width: 1200px) {
.navbar-header {
    padding-left: 10px;
}
}

@media (max-width: 768px) {
.navbarup {
    display:none;
}
}

.navbarup {
height: 40px;
}

.navbarmiddle {
border-top: thick solid #205882;
border-width: 2px;
}

.navbarunder {
font-weight: 400;
font-size: 17px;
font-family: 'Lato', sans-serif;
padding-left: 80px;
}

@media (max-width: 1200px) {
.navbar-header {
    float: none;
}

.navbar-left, .navbar-right {
    float: none !important;
}

.navbar-toggle {
    display: block;
}

.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    display: block;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

.navbar-collapse.collapse {
    display: none !important;
}

.navbar-nav {
    float: none !important;
    margin-top: 7.5px;
}

    .navbar-nav > li {
        float: none;
    }

        .navbar-nav > li > a {
            padding-top: 10px;
            padding-bottom: 10px;
        }

.collapse.in {
    display: block !important;
}
}

.links {
float: right;
margin-top: 20px;
margin-left: 300px;
}

代码(部分):

 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <img height="55px" src="~/images/logo.jpg" />
            </div>
        </div>
    </div>
    <div class="navbarmiddle">
    </div>
    <div class="container">
        <div class="row">
            <div class="navbarunder">
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class='@Html.IsActive("Home", "Index")'>
                            @Html.ActionLink("Home", "Index", "Home")
                        </li>

谁能告诉我应该尝试用 css 调整哪些元素？

Answer 1

https://jsfiddle.net/6u9zoe5e/

bootstrap.js 放在页脚？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>