Bootstrap響應式設計不起作用

-1

我相信我們不必在bootstrap中做任何事情來使其響應。這是默認的。如果瀏覽器大小發生變化，應用程序組件會相應地進行調整。但不知何故，響應式設計無法正常工作。Bootstrap響應式設計不起作用

任何人都可以請指教爲什麼？

我的代碼非常簡單。

<%@ 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代碼段

#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; 
    }

什麼downvoting問題的地步。如果有人不知道，會詢問

來源

2014-02-09 underdog

此錯誤是否發生在您導入bootstrap.css的所有網頁上。 –

只要在底部標籤上添加這些行就可以了。

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

而不是給

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

嘗試給出準確的路徑位置，並給予一試。

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

我發現了什麼問題是

你不使用類，這是用於使用引導3. 你更好的閱讀GRID SYSTEM

文件剛剛嘗試下面的代碼響應式佈局，你把它作爲一個例子

<!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文件路徑沒有問題，因爲bootstrap的其他組件工作正常。只是響應功能無法正常工作。 – underdog

@ShivangSarawagi檢查我的編輯，你可以得到解決方案。 – Karthikeyan

Bootstrap響應式設計不起作用

回答

相關問題