부트 스트랩 반응 형 디자인이 작동하지 않습니다.

-1

저는 반응 형으로 만들기 위해 부트 스트랩에서 아무 것도 할 필요가 없다고 생각합니다. 기본값입니다. 브라우저 크기가 변경되면 앱 구성 요소가 그에 따라 조정됩니다. 그러나 어쨌든 반응이 빠른 디자인은 효과가 없습니다.부트 스트랩 반응 형 디자인이 작동하지 않습니다.

누구든지 조언을 구할 수있는 이유는 무엇입니까?

내 코드는 정말 간단합니다.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Home</title> 
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="${pageContext.request.contextPath}/css/bootstrap-theme.css" rel="stylesheet" type="text/css"> 
<link href="${pageContext.request.contextPath}/css/app.css" rel="stylesheet" type="text/css"> 
<script src="${pageContext.request.contextPath}/js/jquery-1.10.1.min.js"></script> 
<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script> 
</head> 
<body> 
<!-- The Main wrapper div starts --> 
<div class="container"> 


    <div id="left_layout"> 
    </div> 

<div id="center_layout"><div class="span6"></div> 
</div>  

<div id="right_layout_one"><</div>  

<div id="right_layout_two"></div> 

<div id="right_layout_three"></div>  
</div> 
<!-- Main container div wrapper ends --> 
</body> 
</html>

사용자 정의 CSS는 질문에 downvoting의 점을 무엇

#left_layout{ 
     background: #FFFFFF; 
     position: absolute; 
     top:  50px; /* margins in pixels */ 
     bottom:  30px; /* could also use a percent */ 
     left:  40px; 
     /* right:  10px; */ 
     min-height: 18px; 
     min-width: 250px; 
     /* box-shadow: 10px 10px 5px #888888; 
     border: 1px; */ 
     /* -moz-border-radius: 8px; 
     border-radius: 8px; */ 
    -webkit-box-shadow: 0 0 5px 2px #F8F8F8; 
    -moz-box-shadow: 0 0 5px 2px #F8F8F8; 
    box-shadow: 0 0 5px 2px #F8F8F8; 
    background: #ffffff; 
    border: 1px solid #ababab; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
    } 

    /* #center_layout{} */ 

    #center_layout{ 
     display: block; 
     background: #F8F8F8; 
     position: absolute; 
     top:  50px; /* margins in pixels */ 
     bottom:  30px; /* could also use a percent */ 
     left:  327px; 
     right:  430px; 
     min-height: 18px; 
     min-width: 465px; 
     /* box-shadow: 10px 10px 5px #888888; */ 
     /* -moz-border-radius: 8px; 
     border-radius: 8px; */ 
     -webkit-box-shadow: 0 0 5px 2px #F8F8F8; 
    -moz-box-shadow: 0 0 5px 2px #F8F8F8; 
    box-shadow: 0 0 5px 2px #F8F8F8; 
    background: #ffffff; 
    border: 1px solid #ababab; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    padding: 5px; 
    }

스 니펫. 모르는 사람이 누구인지 물어보십시오.

출처

2014-02-09 underdog

이 오류는 bootstrap.css를 가져온 모든 웹 페이지에서 발생합니다. –

머리말 태그 하단의이 줄을 추가하십시오. 대신 정확한 경로 위치를주고 시도해

${pageContext.request.contextPath}/css/bootstrap.css

시도를주는

 <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
    </body>

====================================

내가 발견 한 무엇을 당신은 그냥 아래의 코드를 시도 당신이 더 GRID SYSTEM

의 문서를 읽을 수 부트 스트랩 3. 사용하여 반응 레이아웃에 사용되는 클래스를 사용하지 않는

문제가, 당신은 예로서 받아

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Home</title> 
    <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css"> 
    <link href="assets/css/bootstrap-theme.css" rel="stylesheet" type="text/css"> 
    <link href="assets/css/app.css" rel="stylesheet" type="text/css"> 
    <script src="assets/js/jquery-1.10.1.min.js"></script> 
    <script type="text/javascript" src="assets/js/bootstrap.js"></script> 
    </head> 
    <body> 
    <!-- The Main wrapper div starts --> 
    <div class="container"> 
     <div class="col-md-4"> 
     <div class="left-side-layout"></div> 
     </div> 
     <div class="col-md-8"> 
     <div class="right-side-layout"></div> 
     </div>  
     </div> 
    <!-- Main container div wrapper ends --> 
    </body> 
    </html>

그리고 이것을 app.css에 포함하십시오.

.left-side-layout { 
     height: 100px; 
     -webkit-box-shadow: 0 0 5px 2px #F8F8F8; 
     -moz-box-shadow: 0 0 5px 2px #F8F8F8; 
     box-shadow: 0 0 5px 2px #F8F8F8; 
     background: #ffffff; 
     border: 1px solid #ababab; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     -khtml-border-radius: 5px; 
     border-radius: 5px; 
    } 

    .right-side-layout { 
     height: 100px; 
     -webkit-box-shadow: 0 0 5px 2px #F8F8F8; 
     -moz-box-shadow: 0 0 5px 2px #F8F8F8; 
     box-shadow: 0 0 5px 2px #F8F8F8; 
     background: #ffffff; 
     border: 1px solid #ababab; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     -khtml-border-radius: 5px; 
     border-radius: 5px; 
    }

시도해보십시오.

참고 : 반응 형 디자인을 찾고 있다면 픽셀 단위로 레이아웃을 고정 폭으로 지정해서는 안됩니다. 대신

<div class="col-md-4"></div> 
    <div class="col-md-8"></div>

을 사용하거나 앱에 따라 크기를 변경하십시오. 작업하기 전에 문서를 읽으십시오.

출처

2014-02-09 18:58:05 Karthikeyan

해당 파일이 이미 포함되어 있습니다. – ZippyV

Karthik 제안에 감사하지만 부트 스트랩의 다른 구성 요소가 정상적으로 작동하므로 css 파일 경로에는 문제가 없습니다. 그것은 작동하지 않는 것만 큼 반응이 빠른 기능입니다. – underdog

@ ShivangSarawagi가 내 편집을 확인하면 해결책을 얻을 수 있습니다. – Karthikeyan

부트 스트랩 반응 형 디자인이 작동하지 않습니다.

답변

관련 문제