无法使用bootstrap创建html视图
无法使用bootstrap创建html视图
提问于 2016-08-23 16:11:20
我有一个像这样的视图，
我希望使用bootstrap创建这个视图，我尝试的代码是
<div class="col-md-12">
<div class="col-md-2" style="background: #fff; border-right: 1px solid #e0e2e4; height: 100vh; ">
</div>
<div class="col-md-1" style="background: #e0e2e4; border-right: 1px solid #e0e2e4; height: 100vh; ">
</div>
<div class="col-md-9" style="background: #fff; border-right: 1px solid #e0e2e4; height: 100vh; " >
</div>
</div>然而，我不能正确地创建它，谁能告诉我如何正确地创建它
回答 1
Stack Overflow用户
发布于 2016-08-23 17:25:56
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#e0e2e4">
<div class="row">
<div class="col-md-12">
<div class="col-sm-2" style="background-color:#fff;height:100vh;border-right: 1px solid #e0e2e4;">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-9">
<div style="margin:10px;background-color:#fff;height:100vh;border-right: 1px solid #e0e2e4;">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<span class="pull-left panel-title col-xs-6"> Dashboard</span>
<span class="pull-right">
<button type="button" class="btn btn-primary btn-xs">Account Setting</button>
</span>
</div>
<div class="panel-body" style="padding:0px">
<div class="row">
<div class="col-md-12">
<div class="col-md-8" style="border">
Recent Activity
</div>
<div class="col-md-4" style="border-left:1px solid #e0e2e4">
<div class="panel panel-primary" style="margin:20px">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
<div class="panel panel-primary" style="margin:20px">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Panel Content</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-1" style="background-color:#fff;height:100vh;border-right: 1px solid #e0e2e4;">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
使用此代码可以随意更改左侧和右侧的方块
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39095741
复制相关文章
相似问题
腾讯云开发者
