Question

我有一个静态设置的bootstrap网站，它不会根据不同的视图大小进行调整。所以我想让它响应但不确定如何。我也使用LESS进行修改，例如twitter bootstrap css。到目前为止，我的网站设置如此......

<div id="wrapper">
   <header>
      <div class="container">
         <div class="row">
            <div class="span12">
               <!-- LOGO HERE -->
            </div>
         </div>
      </div>
   </header>
   <div id="main-content" class="container">
      <div class="row">
         <div class="span8">
            <!-- My content -->
         </div>
         <div class="span4">
            <!-- My content too -->
         </div>
      </div>
   </div>
</div>

此外，该网站是为940px构建的，所以当我做出响应时，我想将页面的最大视角设置为940px而不是1200px，并让我的div.wrapper仍然在页面的中心。

希望所有这一切都是哈哈。

Answer 1

将.container更改为.container-fluid，将.row更改为.row-fluid。看看这个：http://jsfiddle.net/ypkJQ/。您还必须记住，每个.row-fluid类都会重置span * width计数器，即span * width下的.row-fluid取自父（.row-fluid）的百分比宽度。

Answer 2

要启用自适应布局，您需要在文档的<head>中添加以下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

由于您使用的是.less源，因此您必须将样式表的引用调整为特定的结构。

在responsive.less注释或删除以下行：

@import "responsive-1200px-min.less";

这将响应较小的屏幕分辨率，但保持最大.container宽度为940px。

将Static Bootstrap网站转换为Responsive

2 个答案: