html - Bootstrap Dropup不起作用

我的dropup中的footer无法正常工作。当我将dropup更改为dropdown时，它开始作为dropdown工作，但我需要一个dropup。
我遵循了bootstrap的指导方针，但是没有用。
这是代码

<footer id="cartFooter">
    <div class="row dropup">
        <button class="btn footerDropup dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>PHONE<span class="text-right">$99.99</span></li>
            <li>PLAN</li>
            <li>ACCESSORIES</li>
            <li>BUNDLE</li>
        </ul>
    </div>
    <div class="row cartInfo">
        <div class="col-xs-4">
            <p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
        </div>
        <div class="col-xs-4 text-center">
            <p>$99.99</p>
        </div>
        <div class="col-xs-4 text-right">
            <p><a><span class="glyphicon glyphicon-trash"></span></a></p>
        </div>
    </div>
</footer>

这是CSS

    #cartFooter{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    color: white;
    height: 60px;
    background:#000;
    overflow: hidden;
}

.cartInfo{
    padding-top: 10px;
}

.footerDropup{
    width: 100%;
    background-color: #212121!important;
    color: #fff!important;
    border-radius: 0;
    font-size: 10px;
    border: 0px solid transparent;
}

.footerDropup:hover{
    background-color: #212121;
    color: #fff!important;
}

.footerDropup:visited{
    color: #fff;
}

这是密码笔的链接
http://codepen.io/theMugician/pen/KdqNpj

最佳答案

您可以尝试一下吗，运行代码片段以查看结果


<!DOCTYPE html>
<html>
    <head>
        <title>The code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <link media="all" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
        <style type="text/css">
#cartFooter{
    position:fixed;
    left:0px;
    bottom:0px;
    width:100%;
    color: white;
    height: 30px;
    background:#000;
    overflow: hidden;
}

.cartInfo{
    padding-top: 10px;
}

#divDropup{
    position: fixed;
    bottom: 30px;
    width: 100%;
}
#divDropup button{
    width: 100%;
    background-color: #212121!important;
    color: #fff!important;
}

#divDropup ul{
    width: 100%;
    background-color: #212121!important;
    color: #fff!important;
    text-align: center;
}
        </style>
    <body>
        <div class="dropup" id="divDropup">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                    <li>PHONE<span class="text-right">$99.99</span></li>
                    <li>PLAN</li>
                    <li>ACCESSORIES</li>
                    <li>BUNDLE</li>
            </ul>
        </div>
        <footer id="cartFooter">
            <div class="row cartInfo">
                <div class="col-xs-4">
                    <p><span class="glyphicon glyphicon-shopping-cart"></span> CART</p>
                </div>
                <div class="col-xs-4 text-center">
                    <p>$99.99</p>
                </div>
                <div class="col-xs-4 text-right">
                    <p><a><span class="glyphicon glyphicon-trash"></span></a></p>
                </div>
            </div>
        </footer>
    </body>
</html>