如何避免細胞在Bootstrap3中的包裝

Question

首先，對這個問題的質量感到抱歉，但解釋我想要達到的是非常困難的，那就是我準備好了Sample code。

那裏您可以看到兩個主要列：#main-left-column和#main-right-column。

在那#main-right-column我已經放置了六個綠色單元格，一切都按照Bootstrap作者的要求工作，但我想以某種方式在我的右列添加'overlay-x:auto' CSS屬性以避免單元格換行。

任何想法如何做到這一點？

Answer 1

簡單，

擺正<div>（內側#main-right-column列）成<table>容器和設置最小寬度。

CSS：

.width-300-450 { 
    min-width:300px; 
    width: 100%; 
    max-width:450px 
} 

例子：

<table> 
    <tr> 
     <td> 
      <div class="width-300-450"> 
       <div class="col-xs-12 bg-success"> 
        <h2>test</h2> 
       </div> 
       <div class="col-xs-12 bg-warning"> 
        <p>...</p> 
       </div> 
      </div> 
     </td> 
     <td> 
      <div class="width-300-450"> 
       <div class="col-xs-12 bg-success"> 
        <h2>test</h2> 
       </div> 
       <div class="col-xs-12 bg-warning"> 
        <p>...</p> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

在#main-right-column您必須設置overlay-x屬性：

#main-right-column { 
    overflow-x: auto; 
    display: inline-block; 
    padding:0; 
} 

完整的示例在這裏：Bootstrap fiddle