将bootstrap下拉菜单移动到另一侧

时间:2018-05-01 10:40:51

标签: css twitter-bootstrap alignment bootstrap-4

通过Bootstrap制作的下拉菜单。我需要将它移动到左侧,如下面的屏幕截图所示。

不要注意代码段和屏幕截图中的颜色。 Before

After



$url = 'http://example.org';

if ( isset($attr['background']) ) {

    add_query_arg( 'background', $attr['background'], $url );

}

if ( isset($attr['color']) ) {

    add_query_arg( 'color', $attr['color'], $url );

}




1 个答案:

答案 0 :(得分:2)

使用dropdown-menu-right ...

https://www.codeply.com/go/HbFHFA7PX6

<ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active uppercase" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
            <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item uppercase aboutUs" href="#">About us</a>
                <a class="dropdown-item uppercase" href="#">Company</a>
                <a class="dropdown-item uppercase" href="#">Our process</a>
                <a class="dropdown-item uppercase" href="#">Services</a>
                <a class="dropdown-item uppercase" href="#">Contact us</a>
                <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a>
            </div>
        </li>
</ul>

相关:Bootstrap 4 Navbar Dropdown Menu Items Right