Question

我有一个看起来像这样的视图，

我希望使用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>

但是我无法正确创建它，任何人都可以告诉我如何正确创建它

Answer 1

＆＃13;

<!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>

＆＃13;

使用此代码执行任何您希望左右阻止的更改

无法使用bootstrap创建html视图

1 个答案: