Question

我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

Answer 1

您是否添加了javascript库的链接？否则，下拉列表无效。

<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>

Bootstrap Dropup无法正常工作

1 个答案: