1
A
回答
0
我一直在使用這個代碼,告訴我,如果這是你需要的東西:
HTML:
<div class="row">
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 medium">
</div>
</div>
<div class="row">
<div class="col-md-12 medium">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row ">
<div class="col-md-12 large">
</div>
</div>
</div>
<div class="col-md-3">
<div class="row ">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
<div class="row">
<div class="col-md-12 small">
</div>
</div>
</div>
</div>
CSS:
.small{
height:100px;
border: 1px solid;
}
.medium{
height:200px;
border: 1px solid;
}
.large{
height:400px;
border: 1px solid;
}
希望它有幫助!
0
根據您在樣本設計下創建的圖片,請檢查它。爲了實現你的設計我已經寫了一些內聯CSS請檢查以及
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:60px">
This is testing data
</div>
<div class="row" style="min-height:360px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
<div class="col-lg-5 col-sm-5 col-xs-5" style="min-height:620px;border:1px solid;margin-left:10px;margin-right:10px" >
This is center content
</div>
<div class="col-lg-3 col-sm-3 col-xs-3" >
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
<div class="row" style="min-height:200px;border:1px solid;margin-bottom:10px">
This is testing data
</div>
</div>
</div>
</div>
</body>
</html>
0
0
.border_black{
\t \t border: thin black solid
\t }
\t .margin_top_10px{
\t \t margin-top: 10px;
\t }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
\t <div class="row">
\t <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
\t \t <div class="row border_black">
\t \t <p>Left Side Contents 1</p>
\t \t </div>
\t \t <div class="row border_black margin_top_10px">
\t \t <p>Left Side Contents 2</p>
\t \t <p>Left Side Contents 2</p>
\t \t </div>
\t </div>
\t <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 center_div text-center">
\t \t <div class="row">
\t \t <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 border_black">
\t \t <p>Center Contents</p>
\t \t <p>Center Contents</p>
\t \t <p>Center Contents</p>
\t \t </div>
\t \t </div>
\t </div>
\t <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">
\t \t <div class="row border_black">Right Side Contents 1</div>
\t \t <div class="row border_black margin_top_10px">Right Side Contents 2</div>
\t \t <div class="row border_black margin_top_10px">Right Side Contents 3</div>
\t \t
\t </div> \t
\t </div>
\t </div>
這裏是JSFiddle
希望這有助於。
相關問題
- 1. 如何對齊引導列中的div?
- 2. 對齊文本DIV引導
- 3. 對齊DIV Html/CSS /引導
- 4. 如何將H1與DIV頂部對齊
- 5. 需要將元素與引導對齊
- 6. 如何將圖像與div底部對齊(在引導程序中)?
- 7. 對齊問題與引導
- 8. 與引導網格對齊
- 9. 如何將div對齊?
- 10. 將div與列表對齊
- 11. 將表格與div對齊
- 12. 如何將div對齊到另一個div的底部(在引導程序中)?
- 13. 如何將內容與容器中間對齊引導程序
- 14. 如何正確地將行與引導程序對齊
- 15. 如何將bootstrap datepicker與引導列對齊?
- 16. 豎直對齊引導行內的div
- 17. 對齊的div垂直usign引導
- 18. 在引導列中垂直對齊div
- 19. 引導推/拉 - DIV不對齊正確
- 20. 對齊引導容器內的div列
- 21. 在引導列底部對齊div
- 22. 引導3 - 兩列 - div垂直對齊
- 23. 在引導3對齊div右
- 24. 將div對齊
- 25. 如何垂直對齊引導程序3列中的div
- 26. 如何將浮動div的內容與div的中心對齊?
- 27. 如何將div與另一個div中的圖像對齊?
- 28. Css Div與div對齊
- 29. 對齊div與CSS
- 30. 對齊引導列
你目前的代碼是什麼樣的? – nehalist
聲明三個主要的div並在其中放置子div。下面的圖片檢查 –