定位菜单位于下拉列表中

Question

I have the following code to display some buttons and dropdown menus.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li><a href="#">Enable</a>

            </li>
            <li><a href="#">Disable</a>

            </li>
        </ul>
    </div>
    <div class="button-group pull-right">
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li>
                <button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>

                </button>
            </li>
            <li>
                <button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>

                </button>
            </li>
        </ul>
    </div>
</div>

It works okay except one of the menus doesn't appear under the dropdown.

Fiddle here

Any ideas would be appreciated.

Answer 1

Looks like you are not using latest version of JQuery. Please update JQuery and use Bootstrap library to make this work.

In you fiddle, choose jQuery 2.1.0 and select Bootstrap 3.2.0 option.

Answer 2

Looks like I had to put the dropdown buttons into their own btn-group .

Fiddle here

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default as-btn-text as-add-btn">Add</button>
        <button type="button" class="btn btn-default as-btn-text as-delete-btn">Delete</button>
        <div class="btn-group" role="group" aria-label="Dropdown Group">
            <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

            </button>
            <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
                <li><a href="#">Enable</a>

                </li>
                <li><a href="#">Disable</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="button-group pull-right">
        <button type="button" class="btn btn-default as-btn-text as-refresh-btn"></button>
    </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="Toolbar Group">
        <button type="button" class="btn btn-default dropdown-toggle as-btn-text as-conf-btn" data-toggle="dropdown" aria-expanded="false">Configuration <span class="caret"></span>

        </button>
        <ul class="dropdown-menu as-toolbar-dropdown" role="menu">
            <li>
                <button id="btnEnable" type="submit" name="command" value="Enable"><span>Enable</span>

                </button>
            </li>
            <li>
                <button id="btnDisable" type="submit" name="command" value="Disable"><span>Disable</span>

                </button>
            </li>
        </ul>
    </div>
</div>