Bootstrap响应式导航导致水平滚动答案

【问题标题】：Bootstrap Responsive nav causing horizontal scrollingBootstrap响应式导航导致水平滚动
【发布时间】：2014-12-31 21:16:53
【问题描述】：

我在我的网站上使用 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>

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

因为padding :0; 在ffnv4.css 的第15 行

并添加一个媒体查询，以便它确实改变您在768px 上方的大屏幕视图。

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

【讨论】：

【解决方案2】：

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

【讨论】：