我正在使用Bootstrap 3网格,我希望不适合该行的单元格被父级溢出隐藏:隐藏的CSS属性,而不是由Bootstrap(“堆叠”)显示在下一行.
这可能吗?请看一下这个例子:
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>
在这个例子中,我希望所有东西都在一条线上,总是,并且有一些不适合#grid-container overflow:hidden隐藏的单元格.
谢谢.
解决方法
我将再一次回答我自己的问题.我卡住了因为我正在寻找专门用Bootstrap的解决方案.
要将所有div保持在一行并且具有不适合溢出隐藏的div:隐藏的父级将这些成分添加到您的css:
在外部div(在我的情况下#grid-container)
white-space: Nowrap; overflow: hidden;
在内部div /元素(在我的情况下#grid-container 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>