gpt4 book ai didi

twitter-bootstrap - Bootstrap垂直网格

转载 作者:行者123 更新时间:2023-12-03 07:06:04 26 4
gpt4 key购买 nike

我有一个关于如何使用 bootstrap 将内容垂直放置在网格系统中的问题。这是我想做的:首先,屏幕应水平分为两部分,左部分 8,右部分 4。然后,左边的部分再垂直划分,上面会有一张 table 。在底部,再次分为 2 个水平方向,每个部分都会显示一个面板。[1]

如何做垂直部分?

<div class="row">
<div class="col-md-8" id="leftside">
?
?
?
</div>
<div class="col-md-4" id="rightside">
...
</div>

最佳答案

检查一下:

<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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

<div class="row">
<div class="col-md-8" style="height:500px;background-color:green;">
<div class="row" style="height:50%;background-color:red;">
<div class="col-md-12">
<p>A</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<p>B</p>
</div>
<div class="col-lg-6" >
<p>C</p>
</div>
</div>
</div>
<div class="col-md-4" style="height:500px;background-color:black">

</div>
</div>

</body>

</html>

代码笔:http://codepen.io/anon/pen/dYVxGa

关于twitter-bootstrap - Bootstrap垂直网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33166310/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com