时间戳

首页 > 解决方案 > 使用 Bootstrap 4 的菜单栏不一致

html - 使用 Bootstrap 4 的菜单栏不一致

问题描述

我正在使用Bootstrap 4创建一个菜单。这是我当前的代码：

<div class="row mx-2">
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
            Option 1
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">
                DDO11
            </div>
            <a href="abc.php" class='dropdown-item'>DDO12</a>
            </form>
        </div>
    </div>
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle mx-3" data-toggle='dropdown'>
            Option 2
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO21</div>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDO22</div>
        </div>
    </div>
    <div class="btn btn-dark col mx-2" onclick="dosomething()">Option3</div>
    <div class="dropdown">
        <div class="btn btn-info dropdown-toggle" data-toggle='dropdown'>
            Option 4
        </div>
        <div class='dropdown-menu'>
            <div class='dropdown-item' style="cursor:pointer;" onclick="dosomething()">DDOP41</div>
        </div>
    </div>
    <div class="btn btn-dark col mx-2"><a href='ABC.php' style="text-decoration:none;color:#fff;">Option 5</a></div>
</div>

问题是下拉按钮与文本一样宽，而非下拉按钮太宽并且占用了所有剩余空间。我需要所有选项按钮的宽度相同。

我尝试分配width:20%并在所有父选项按钮上尝试col-*-* ，但没有任何效果。

还可以做些什么来实现所有选项按钮的宽度相等？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

在 Bootstrap 4 中，row该类只能用于包含col*而不是其他元素，例如btnand dropdown。其他元素放置在列内。从引导文档...

“行是列的包装。每一列都有水平填充（称为排水沟）来控制它们之间的空间......在网格布局中，内容必须放在列中，并且只有列可以是行的直接子级。”

将下拉列表和 btn 放在列中。使用自动布局网格（col或col-auto）来控制等宽。对于填充其父级宽度的按钮，请使用btn-block.

对于全等宽使用col...

<div class="row mx-2">
        <div class="col">
            <div class="dropdown">
                <div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
                    Option 1
                </div>
                <div class="dropdown-menu">
                    ...
                </div>
            </div>
        </div>
        <div class="col">
            <div class="btn btn-dark btn-block mx-2">Option3</div>
        </div>
        ...
    </div>
</div>

对于“缩小以适应”内容宽度，请使用col-auto...

<div class="row mx-2">
        <div class="col-auto">
            <div class="dropdown">
                <div class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">
                    Option 1
                </div>
                <div class="dropdown-menu">
                    ...
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="btn btn-dark btn-block mx-2">Option3</div>
        </div>
        ...
    </div>
</div>

两个选项的演示

推荐阅读