dropwdown div在其父容器內被切斷

Question

我有這個HTML代碼

<div class="cos_data_table_header_right">
    <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            <i class="fa fa-download"></i>
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>
    <button class="btn btn-default"><i class="fa fa-search"></i></button>
</div>

這是.cosdata_table_header的css

.cosdata_table_header{
    padding: 10px;
    background: #cacaca;
    display: block;
}

問題是，.cosdata_table_header的默認樣式未包裝其子項，但下拉列表工作正常，但是如果我將其設置為溢出：自動，.cosdata_table_header會包裝其子項，但如果單擊下拉按鈕，其內容將被刪除，.cosdata_table_header內將顯示一個可怕的滾動條，如果我將.cosdata_table_header的樣式設置為溢出：隱藏，則不會顯示下拉列表內容（請參閱下文）。

有什么幫助，建議，建議，想法和線索可以使這項工作嗎？

PS：我使用bootstrap 3作為下拉菜單。

Answer 1

您可以在JSFiddle中重現該問題嗎？ 我建議嘗試在chrome開發人員工具或Firebug中調試布局。

Answer 2

忽略html類與您的選擇器不匹配（可能是拼寫錯誤嗎？），我會說不要使容器顯示塊並使溢出可見。 這樣，您的按鈕將能夠位於其他內容旁邊，並且下拉菜單與其他內容重疊，而無需擴展整個容器。 我還沒有測試過，但是如果是我，這是我會嘗試的第一件事。

JSFiddle或開發站點的鏈接或其他東西可以使您更輕松地了解正在發生的事情並解決問題