트위터 부트 스트랩이 반응이 좋지 않습니다.

트위터 부트 스트랩을 시도해보고 다음 레이아웃을 생각해 냈습니다.트위터 부트 스트랩이 반응이 좋지 않습니다.

<!doctype html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 
    <title></title> 
</head> 
<body> 
    <div id="header" class="container"> 
     <div class="row"> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 
      <div class="span1" style="background-color: yellow; height:50px;"> 
      </div> 

     </div> 
    </div> 

    <div id="main" class="container"> 
     <div class="row"> 
      <div class="span3" style="background-color: red; height:100px;"> 
      </div> 
      <div class="span9" style="background-color: blue; height:100px;"> 
       <div class="row"> 
        <div class="span3" style="background-color: orange; height:50px;"> 
        </div> 
        <div class="span3" style="background-color: orange; height:50px;"> 
        </div> 
        <div class="span3" style="background-color: orange; height:50px;"> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 

    <div id="footer" class="container"> 
     <div class="row"> 
      <div class="span12" style="background-color: green; height:50px;"> 
      </div> 
     </div> 
    </div> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

뷰포트 너비가 767px보다 작 으면 열을 스택해야합니다. Chrome에서 작동하도록 할 수 없습니다.

출처

2012-10-03 ZeroDivide

시도한 후에 당신에게 사용자 정의 CSS 파일을 포함해야합니다. 그런 다음 어떤 검색어가 실행되는지 확인할 수 있습니다 (또한 Chrome에서 Element Inspector를 잘 활용할 수 있음). –

나는 그것을 알아 냈다. 스타일 시트의 순서를 변경하면됩니다.

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/bootstrap-responsive.css" rel="stylesheet">

출처

2012-10-03 00:38:16 ZeroDivide

는 Yes.you 부트 스트랩 파일 부트 스트랩 - responsive.css에서 각 미디어 쿼리 블록의 배경 색상 변경을 추가

출처

2014-02-26 06:15:22 Coderapper

트위터 부트 스트랩이 반응이 좋지 않습니다.

답변

관련 문제