兩個與左欄

最小寬度列布局我有一個兩列的佈局是這樣的：兩個與左欄

<style>.less-padding{ padding: 0 5px; }</style> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="less-padding col-xs-4"> 
      <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">foo</h3> 
        </div> 
        <div class="panel-body"> 
         Lorem ipsum dolor sit ... 
        </div> 
      </div> 
     </div> 
     <div class="less-padding col-xs-8"> 
      <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">bar</h3> 
        </div> 
        <div class="panel-body"> 
         Lorem ipsum dolor sit ... 
        </div> 
      </div> 
     </div> 
    </div> 
</div>

現在我想左欄留在250px一個最小寬度，當用戶改變瀏覽器和正確的用盡剩餘空間。所以，我想是這樣的：

<div class="less-padding col-xs-4" style="min-width:250px">

它的工作原理，但右列現在下的左路突破爲我調整我的瀏覽器由於引導的滿額列寬。

有沒有辦法來防止這種情況，並使其使用剩餘的空間呢？

JSFiddle

在此先感謝。

來源

2015-02-05 Demnogonis

你也可以使用一個媒體查詢定義第一列爲250px的點並進行一些CSS更改。

例如，我這是怎麼做的：

JSFIddle

來源

2015-02-05 15:05:41 Ardian

這可以工作。我會試試看。但是請將您的CSS代碼編輯到您的答案中，並將該網址設置爲可點擊的鏈接。謝謝 – Demnogonis 2015-02-05 15:13:49

我應用了你的解決方案，現在它有點作用。謝謝。 – Demnogonis 2015-02-06 11:55:15

很酷。乾杯（B） – Ardian 2015-02-08 17:43:34

有沒有辦法實現這個使用引導「亂用」的，但您可以使用CSS3的Flexbox的自舉一起..

http://bootply.com/3fZNoWqbTu

來源

2015-02-05 14:08:49 ZimSystem

這是一個很好的解決方案。但不幸的是，我必須在Flexbox不支持的情況下支持Internet Explorer 9及更高版本。 – Demnogonis 2015-02-05 15:08:32

回答

相關問題