防止在引导程序3中堆栈并使用隐藏隐藏网格单元格

我正在使用引导程序3网格，并且我希望单元格不适合行被父级溢出隐藏：隐藏CSS属性，而不是通过Bootstrap（“堆叠”）显示在下一行。防止在引导程序3中堆栈并使用隐藏隐藏网格单元格

这可能吗？请看看这个例子：

http://plnkr.co/edit/TYyEcYSe1MhZWTCFnJln?p=preview

<!DOCTYPE html> 
<html> 

<head> 

    <style> 

    #grid-container { 
     overflow: hidden; 
    } 

    #grid-container div { 
     background-color: #cdcdcd; 
     border-right: 1px solid white; 
     border-bottom: 1px solid white; 
    } 
    </style> 

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
</head> 

<body> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div id="grid-container" class="col-xs-12"> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 1 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 2 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 3 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 4 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 5 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> 
      Item 6 
      </div> 
     </div> 
    </div> 
</div> 

</body> 

</html>

在我喜欢一切是在一个单行的例子中，始终，并有不符合按＃并网隐藏单元格容器溢出：隐藏。

谢谢。

来源

2014-12-19 Julius

我再次回答我自己的问题。我被卡住了，因为我正在用Bootstrap专门搜索解决方案。

为了保持在同一行所有div并有不符合的溢出隐藏层：隐藏父的这些成分添加到您的CSS：在

的外层div（＃网格容器我情况）

white-space: nowrap; 
overflow: hidden;

在内的div /元件（在我的情况＃网格容器DIV）

display: inline-block; 
float: none; <!-- overrides Bootstrap's float:left for grid columns -->

一个完整的例子是在这里：

http://plnkr.co/edit/8ns6Ov4fylTq97Z62MTj?p=preview

<!DOCTYPE html> 
<html> 

<head> 

    <style> 

    #grid-container { 
     white-space: nowrap; 
     overflow: hidden; 
     width: 80%; 
    } 


    .item { 
     width: 25%; 
     display: inline-block; 
     background-color: #cdcdcd; 
     border-right: 1px solid white; 
     border-bottom: 1px solid white; 
    } 
    </style> 

</head> 

<body> 
    <div id="grid-container"> 
     <div class="item"> 
     Item 1 
     </div> 
     <div class="item"> 
     Item 2 
     </div> 
     <div class="item"> 
     Item 3 
     </div> 
     <div class="item"> 
     Item 4 
     </div> 
     <div class="item"> 
     Item 5 
     </div> 
     <div class="item"> 
     Item 6 
     </div> 
</div> 

</body> 

</html>

来源

2014-12-19 15:27:34 Julius

防止在引导程序3中堆栈并使用隐藏隐藏网格单元格

回答

相关问题