我有一个看起来像这样的 View ，
我想使用 bootstrap 创建这个 View ，我尝试的代码是
<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>
但是我无法正确创建它，谁能告诉我如何正确创建它
最佳答案
<!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>使用这段代码做任何你想改变的左右 block
关于twitter-bootstrap - 无法使用 Bootstrap 创建 html View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39095741/