無法使用創建HTML視圖引導

我想用引導創建這個觀點，我試過的代碼是

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

但是我無法正確創建，任何人都可以告訴我如何正確創建它

來源

2016-08-23 user3732711

請確定您的問題..你是什麼不正常呢？ –

<!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"> 
 
     \t \t <div class="panel-heading clearfix"> 
 

 
\t \t \t \t <span class="pull-left panel-title col-xs-6"> Dashboard</span> 
 
\t \t \t \t <span class="pull-right"> 
 
\t \t \t \t \t <button type="button" class="btn btn-primary btn-xs">Account Setting</button> 
 
\t \t \t \t </span> 
 
\t \t </div> 
 
     \t \t <div class="panel-body" style="padding:0px"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-md-12"> 
 
\t \t \t \t \t <div class="col-md-8" style="border"> 
 
\t \t \t \t \t \t Recent Activity \t \t \t \t \t 
 
\t \t \t \t \t </div> \t 
 
\t \t \t \t \t <div class="col-md-4" style="border-left:1px solid #e0e2e4"> 
 
\t \t \t \t \t \t <div class="panel panel-primary" style="margin:20px"> 
 
     \t \t \t \t \t \t \t <div class="panel-heading">Panel with panel-primary class</div> 
 
     \t \t \t \t \t \t \t <div class="panel-body">Panel Content</div> 
 
    \t \t \t \t \t \t  </div> 
 
<div class="panel panel-primary" style="margin:20px"> 
 
     \t \t \t \t \t \t \t <div class="panel-heading">Panel with panel-primary class</div> 
 
     \t \t \t \t \t \t \t <div class="panel-body">Panel Content</div> 
 
    \t \t \t \t \t \t  </div> \t \t \t \t \t 
 
\t \t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t </div> \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
    \t  </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>

使用此代碼做任何你想離開的變化和右塊

來源

2016-08-23 09:25:56 mean

無法使用創建HTML視圖引導

回答

相關問題