Bootstrap拆分下拉環繞在表標題

我有一個拆分Bootstrap下拉列表，我將其封裝在表單中並添加到表標題中。問題在於，當縮小屏幕大小時，下拉切換元素會進行換行。起初，我認爲這是表格換行，但我認爲它是表格標題。Bootstrap拆分下拉環繞在表標題

下面是用於與實況代碼的例子的http://www.bootply.com/zzRJxiYy80。

感謝，

丹

次要更新（從回答評論更多細節）

在我來說，我使用的輪廓按鈕。我在每個按鈕和下拉列表中都有Ransack排序鏈接。第二個「主要類別」比其他的稍寬一些，在這一點上，我讓它變得太過分了。這樣的次要的東西驅使我堅果，但我需要放手:)

這一個是在-0.45em

我打了這一點，並在-0.37em

入駐

來源

2016-06-07 Dan Tappin

那麼，呃......什麼樣的行爲會更容易被你接受？如果表格標題不再有足夠的空間來容納一行內容，您希望它做什麼？ – Serlite

它不應該包裝 - 它假設是一個單一的按鈕。 –

我會建議覆蓋引導程序的使用float:left用於保持這些.btn元素在同一行上，而改爲使用display:inline-block。然後，您可以使用white-space:nowrap來防止空間變得有限時它們分裂成多行。

大部分實際上已經在引導的CSS定義你需要的樣式（display:inline-block和white-space:nowrap） - 你只需要一對夫婦更多的款式給他們使用你的優勢：

.btn-group.nowrap > .btn{ 
    float:none; 
} 
.btn-group.nowrap > .btn:not(:first-child){ 
    margin-left: -0.4em; /* To deal with whitespace between inline-block elements */ 
}

下面是一個updated Bootply證明。希望這可以幫助！如果您有任何問題，請告訴我。

來源

2016-06-07 17:23:17 Serlite

這很完美 - 我的CSS技巧非常薄弱。我看過這些，但不知道從哪裏開始。對於獎勵積分，您是否看到下拉菜單是如何隱藏在響應表格元素中的？在打開下拉菜單時有什麼辦法可以自動展開？這也許應該是一個單獨的問題，但我想我會浮動它。 –

@DanTappin很高興能幫到你！是的，這可能應該是另一個問題......但是，嘿，解決方案很簡單，你可能不需要問它。 = P現在，'.table-responsive'具有'overflow-x：auto'風格，這會導致多餘的內容隱藏（但可滾動）。您只需將其更改爲「overflow-x：visible」，並且該下拉列表不會再隱藏在該元素中。（不知道這可能有什麼副作用，儘管目前不會造成任何影響。） – Serlite

它的工作效率是99％，除了margin-left選項似乎是越野車。當你調整這個邊距時，左邊會隨機地使各種頭部分流線變寬或「正常」 –

Bootstrap拆分下拉環繞在表標題

回答

相關問題