부트 스트랩 단일 페이지 응용 프로그램 레이아웃

-4

부트 스트랩에서 첨부 이미지와 같은 단일 페이지 응용 프로그램 레이아웃을 얻는 방법은 무엇입니까?부트 스트랩 단일 페이지 응용 프로그램 레이아웃

참고 : 어떤 행동에도 컨테이너 만 교체됩니다.

2017-05-19 Sagar Bhosale

이 당신을 도울 수 있습니다! 나는 당신을 낙담시키고 싶지 않다. 그래서 대답해라. 그러나 다음 시간, 당신이 https://stackoverflow.com/help/how-to-ask

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 


<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
<style> 
// styles here 
body, html{ 
    height:100%; 
} 
.red{ 
    background: red; 
} 
.theheader{ 
    height: 50px; 
} 
.thecontainer{ 
    height:100%; 
} 
.h100{ 
    height: calc(100% - 50px); 
} 
.leftbar{ 
    background: green; 
    height:100%; 
} 
.rightbar{ 
    background: blue; 
    height:100%; 
}</style> 
    </head> 
    <body> 
    <div class="container-fluid thecontainer"> 
    <div class="row red theheader"> 
     <div class="col-md-12"> 
     Header here 
     </div> 
     </div> 

    <div class="row h100"> 
     <div class="col-md-3 leftbar"> 
     left side 
     </div> 
     <div class="col-md-9 rightbar"> 
      left side 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

출처

2017-05-19 07:00:30 rrmerugu

예 반드시 읽어 주시기 바랍니다! 고맙습니다 –

부트 스트랩 단일 페이지 응용 프로그램 레이아웃

답변

관련 문제