全宽下拉菜单

时间:2017-05-31 18:44:39

标签: css twitter-bootstrap drop-down-menu

我有一个下拉菜单,打开时我需要它来拉伸容器的整个长度,我正在使用twitter bootstrap,目前它就像图像Dropwdown menu

这是html

<ul id="multicol-menu" class="nav navbar-nav pull-right">

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a>
   <ul class="dropdown-menu">
        <div clas="row">
        <li>
            <div class="row">
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test1-1</a></li>
                    <li><a href="#">test1-2</a></li>
                    <li><a href="#">test1-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test2-1</a></li>
                    <li><a href="#">test2-2</a></li>
                    <li><a href="#">test2-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test3-1</a></li>
                    <li><a href="#">test3-2</a></li>
                    <li><a href="#">test3-3</a></li>
                </ul>
                <ul class="list-unstyled col-md-2">
                    <p class="submenu-title">TITLE</p>
                    <li><a href="#">test3-1</a></li>
                    <li><a href="#">test3-2</a></li>
                    <li><a href="#">test3-3</a></li>

                </ul>
                <ul class="list-unstyled col-md-4">
                    <a href="#myModal" role="button" data-toggle="modal">
                        <img src="img/book-now-block.png" />
                    </a>
                </ul>
            </div>
        </li>
        </div>
    </ul> 
</li>

1 个答案:

答案 0 :(得分:3)

将此css提供帮助

    /* CSS used here will be applied after bootstrap.css */

.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%;  }
.dropdown-menu>li { display: block; }