我想問,如果這真的有可能在引導佈局 this is the layout引導佈局的cols可能性
-1
A
回答
0
您可以創建這樣的佈局使用面板...看下面的例子,並改變它根據你的設計
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- 1st panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br>
1st panel<br>
1st panel
</div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br>
4th panel<br>
4th panel<br>
4th panel<br>
</div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7th</h3>
</div>
<div class="panel-body">
7th panel<br>
7th panel<br>
7th panel<br>
7th panel<br>
</div>
</div>
</div>
<!-- 2nd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel
</div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
</div>
</div>
</div>
<!-- 3rd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel
</div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
</div>
</div>
</div>
</div>
</body>
</html>
0
試試這個代碼,這項工作對我來說:jsfiddle
ul {
-moz-column-count: 3;
-moz-column-gap: 5px;
-webkit-column-count: 3;
-webkit-column-gap: 5px;
column-count: 3;
column-gap: 5px;
width: 200px;
}
ul li {
display: inline-block;
width: 100%;
background-color: #fbf3fb;
margin-bottom: 5px;
}
+0
我試過了,但這不是我想要的佈局。 –
相關問題
- 1. 引導COLS佈局基於設備分辨率
- 2. 引導DIV佈局
- 3. 引導佈局Coloumn
- 4. Twitter的引導3 - 佈局
- 5. Css佈局引導覆蓋
- 6. 引導2列布局
- 7. 四列布局引導
- 8. Zend佈局和引導
- 9. twitter引導佈局問題
- 10. 引導4聖盃佈局
- 11. 兩欄佈局引導
- 12. 引導3響應佈局
- 13. HTML5引導流程佈局
- 14. 引導推輓在多個COLS
- 15. 不可能的CSS佈局?
- 16. 擬合12格引導佈局的8列布局?
- 17. 可能會改變太多佈局的可見性是一個性能問題?
- 18. 改善佈局性能
- 19. JSF2/Primefaces佈局性能
- 20. ListView項目佈局性能
- 21. Twitter的引導形式佈局
- 22. firefox佈局損壞的引導程序
- 23. 帶引導程序的邊框佈局
- 24. 引導記分牌的頁面佈局
- 25. Twitter的引導3佈局問題
- 26. 帶引導程序的兩節佈局
- 27. 使用twitter引導的CSS佈局
- 28. Twitter的引導塊佈局問題
- 29. 引導程序中的複雜佈局
- 30. Chrome的引導程序佈局中斷
感謝,但它的不一樣,我的佈局 –
我有舉個例子,你可以根據你的佈局來改變設計。 – Allen
我看到它現在清除了我。謝謝。 –