Question

所以现在我终于得到了我的药丸下降工作，但随后出现了另一个问题 - 因为我使用nav-justified来使我的导航栏居中，药丸很宽，下拉一直到药丸的左边。我能以任何方式集中这个下拉列表吗？ JSFiddle看起来像这样：https://jsfiddle.net/htsda5xo/1/

HTML的片段：

<div class="nav">
    <ul class="nav nav-pills nav-justified">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">WEBDESIGN <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">HTML 5</a></li>
                <li><a href="#">CSS 3</a></li>
                <li><a href="#">Bootstrap 5</a></li>
            </ul>
        </li>
        <li><a href="#">DYNAMIC WEBDESIGN</a></li>

Answer 1

试试这个，

  .nav-justified>.dropdown .dropdown-menu {
    /* top: auto; */
    left: 50%;}

Answer 2

试试这个

<div class="nav">
<ul class="nav nav-pills nav-justified">
    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">WEBDESIGN <span class="caret"></span></a>
        <ul class="dropdown-menu text-center" role="menu">
            <li><a href="#">HTML 5</a></li>
            <li><a href="#">CSS 3</a></li>
            <li><a href="#">Bootstrap 5</a></li>
        </ul>
    </li>
    <li><a href="#">DYNAMIC WEBDESIGN</a></li>

是否可以将下拉列在药丸（Bootstrap）下方？

2 个答案: