Question

我在我的网站上使用Bootstrap 3，移动导航导致水平滚动。看看：http://www.fastfoodnutrition.org/如果您使浏览器足够小以显示移动菜单，则在展开它时，您将看到水平滚动条。我不能为我的生活找出造成这种情况的原因。任何帮助将不胜感激。代码如下：

<nav class="navbar navbar-default navtop" role="navigation">
    <div class="container-fluid">
        <div style="width:100%;">
            <div class="navbar-brand visible-xs">   
                <a title="Fast Food Nutrition" href="/">
                    <img alt="Fast Food Nutrition" src="/images/logo.png">
                </a>
            </div>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
            </button>
        </div>
        <div style="clear:both;"></div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>    <a title="Fast Food Restaurants" href="/fast-food-restaurants.php">Restaurants</a>

                </li>
                <li>    <a title="Fast Food Nutrition Meal Calculator" href="/fast-food-meal-calculator.php">Meal Calculator</a>

                </li>
                <li>    <a title="Fast Food Nutrition Blog" href="/blog/">Blog</a>

                </li>
                <li>    <a title="Nutrition Glossary" href="/glossary/">Glossary</a>

                </li>
                <li>    <a title="Fast Food Nutrition Lesson Plans" href="/lesson-plans.php">Teachers</a>

                </li>
                <li>    <a title="About FastFoodNutrition.org" href="/about-us.php">About</a>

                </li>
                <li class="hidden-sm visible-xs">   <a title="Search FastFoodNutrition.org" href="/gsearch.php">Search</a>

                </li>
            </ul>
            <div class="hidden-xs">
                <form action="http://www.fastfoodnutrition.org/gsearch.php" id="cse-search-box">
                    <div id="desktopsearch">
                        <input type="hidden" name="cx" value="partner-pub-8872439879453765:6542173620" />
                        <input type="hidden" name="cof" value="FORID:10" />
                        <input type="hidden" name="ie" value="UTF-8" />
                        <input type="text" name="q" size="20" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</nav>

Answer 1

由于padding :0;

中第15行的ffnv4.css

添加媒体查询，以便它改变768px上方的大屏幕视图。

@media (min-width: 768px) {
    #bs-example-navbar-collapse-1 {
       padding: 0 15px;
    }
}

Answer 2

正确的答案是here，bootstrap使用navbar-nav元素的负边距。

Bootstrap响应导航导致水平滚动

2 个答案: