Bootstrap下拉菜单超出了屏幕的宽度

Question

请查看此链接http://jsfiddle.net/bw7k3yee/点击“请点击此处”，并注意子菜单如何延伸到屏幕左侧。

我该如何解决这个问题？

以下是HTML代码：

<div class="navbar navbar-static-top navbar-inverse" style="background-color:purple; margin-top:0px;">
     <div class=" container">


         <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>


         <div class= "collapse navbar-collapse navHeadCollapse">


            <ul class= "nav navbar-nav navbar-right">

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Click Here Please<b class="caret"></b></a> 
                    <ul class="dropdown-menu">
                        <li><a href="http://twitter.com">This Sub Menu floats extends beyond the width of the screen</a></li>
                        <li><a href="http://twitter.com">This Sub Menu floats extends beyond the width of the screen </a></li>
                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu2 Menu2 Menu2<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu2<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>



                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 5<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 7<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 9<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


             <li class="dropdown">

                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 10<b class="caret"></b></a>
                 <ul class="dropdown-menu">

                 </ul>
             </li>   
            </ul>
         </div>

     </div>
     <!-- This creates the login bar on top -->
</div>

Answer 1

好的，基本上您需要做的是将.dropdown-menu-right添加到右侧过度运行的菜单中。看看我在updated js.fiddle

上做了什么