On Bootstrap如何強制內容適合特定列？

在這個項目上，我正在努力，用戶有能力決定哪些小部件（徽標，搜索，登錄，購物車按鈕）被放置在此標題上，最多爲12列。他們可以決定每個小部件將採用多少個列。On Bootstrap如何強制內容適合特定列？

在這種情況下，我有一個小部件，需要2引導列，但整個內容不適合裏面。我必須將空格設置爲'nowrap'，這會使內容溢出到下一列。

我想知道是否有可能在CSS中，當沒有空間時（將空白區域設置爲'nowrap'），我如何強制此列的內容擴展並適應其寬度。

下面是使用HTML的簡化版本（仍可產生我試圖解決這個問題）

<div class="container"> 
     <div class="row"> 
       <div class="col-md-2 col-sm-2 col-xs-2"> 
         <a class="logo" href="#" style=""><img src="logo.png" alt="Logo"></a> 
       </div> 
       <div class="col-md-6 col-sm-6 col-xs-6"> 
         <input type="text" class="form-control" placeholder="Search All Categories"> 
       </div> 
       <div class="col-md-2 col-sm-2 col-xs-2 text-nowrap"> 
         <a><span>Hi, Sign In<br><strong>Your Account</strong></span></a> 
         <a><span>Quick Order</span> <i class="fa fa-bolt"></i></a> 
       </div> 
       <div class="col-md-2 col-sm-2 col-xs-2"> 
         <div class="cart-btn"> 
         </div> 
       </div> 
     </div> 
</div>

的車按鈕

.cart-btn { 
     width: 120px; 
     height: 40px; 
     display: inline-block; 
     background-color: #292c2e; 
     margin-left: 10px; 
}

在樣品上的CSS JSFiddle再現這個問題 http://jsfiddle.net/scottx/mA6Za/438/

這個想法是允許用戶將這些小部件添加到他並確保所有內容都按預期加載，並防止它們「中斷」，而不管添加了哪些小部件以及他們決定爲每個小部件分配多少列。因此，在這種情況下，用戶添加了2個列的小部件'徽標'，6個列的小部件'搜索'，包含登錄按鈕，收藏夾等的小部件'各種'，並且佔用2列， '購物車'也需要2列。我在這裏面臨的問題是，小屏幕上的小部件'各種'太大而不適合2列。

也許我試圖實現的方式是不可能的，如果我們將更多的空間分配給一列，其他列將不得不失去空間，我猜瀏覽器不知道哪一個將會。我認爲這可以用JS修復，但我想知道是否有人可能只有CSS解決方案。

非常感謝！

來源

2017-01-23 scottx

如在現有的「答案中提到'，沒有看到您現有的代碼，我們就無能爲力 – MTCoster

我同意Dan Vinnicombe ......沒有看到代碼，很難說如何幫助您。作爲一個每天使用Bootstrap的人，我會說我相信你的解決方案不是技術性的，而是組合性的。你現在不願意讓你自己交換房間。有些東西需要改變才能獲得所需的空間。 – user7457147

我會去的：

div.row > div > * { 
max-width: 100%; 
}

這個CSS將迫使裏面的cols的所有元素取最大值。父母的寬度爲100％

我不知道你想在那裏實現什麼，但我們可以使文本停止溢出容器與

.text-nowrap { 
    white-space:initial; 
}

Update JSFiddle

來源

2017-01-23 17:05:52 Kejt

我試過但沒有成功，對不起Kejt。我在JSFiddle上添加了一個示例，我們可以看到它發生。謝謝。 – scottx

我已更新jsfiddle - http://jsfiddle.net/mA6Za/441/ – Kejt

我更新@Kejt答案和'小提琴'鏈接也請通過。 –

On Bootstrap如何強制內容適合特定列？

回答

相關問題