引导响应式设计不起作用答案

【问题标题】：Bootstrap responsive design not working引导响应式设计不起作用
【发布时间】：2014-03-06 22:48:31
【问题描述】：

我相信我们不需要在引导程序中做任何事情来使其响应。默认情况下。如果浏览器大小发生变化，应用程序组件也会相应调整。但不知何故，响应式设计不起作用。

谁能告诉我为什么？

我的代码非常简单。

<%@ 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 sn-p

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

否决这个问题有什么意义。不知道的人会问

【问题讨论】：

你所有的 bootstrap.css 已经导入的网页是否都会出现这个错误。

标签： css twitter-bootstrap user-interface responsive-design twitter-bootstrap-3

【解决方案1】：

只需尝试在标题标签的底部添加这些行。

     <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

尝试给出确切的路径位置并试一试。

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

我发现了问题所在

您没有使用将用于使用 Bootstrap 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>

或根据您的应用更改大小。并在开始之前阅读文档。

【讨论】：

感谢 Karthik 的建议，但 css 文件路径没有问题，因为引导程序的其他组件工作正常。只是响应式功能不起作用。
谢谢 Karthik 我会试试的。我真的很感激。