两个与左栏

最小宽度列布局我有一个两列的布局是这样的：两个与左栏

<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

回答

相关问题