Question

我需要有3个下拉按钮互相内联。我使用btn-group，但这打破了其中一个下拉菜单的布局。下拉内容的布局需要很宽，但使用btn-group或display:inline-block会强制它成为标准的，缩小的下拉列表，会破坏我的内容布局。

JS Fiddle

请注意第一个下拉列表是如何广泛的。如果您将父div更改为btn-group或display:inline-block，则内容会缩小并变窄。我需要保持宽下拉列表，同时使所有按钮显示在一行上。

我该怎么做？

Answer 1

你必须使用某些功能，这样他们的大盒子就不会显示与狭窄的相同的时间，但你的问题是将.dropdown类设置为position:relative你是限制它的子元素的宽度。通过删除它并更改孩子的最高位置，它应该按照您希望的方式显示。

.dropup, .dropdown {
  position: inherit;
}
.dropdown-menu {
   top:40px;
}

jsfiddle-link

Answer 2

您可以尝试使用以下html

 <div class="row">
    <div class="col-md-6 btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Some large content hereSome large content hereSome large content hereSome large content hereSome large content here
            </a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <div class="col-md-3 btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
    <div class="col-md-3 btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:100%;">
            Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>
</div>

内联按钮布局中断下拉内容布局

2 个答案: