将静态引导网站转换为响应式答案

【问题标题】：Converting a Static Bootstrap website to Responsive将静态引导网站转换为响应式
【发布时间】：2013-03-05 16:30:32
【问题描述】：

我有一个静态设置的引导网站，它不会根据不同的视图大小进行调整。所以我想让它响应但不知道如何。我还使用 LESS 对 twitter 引导 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 构建的，所以当我让它响应时，我想将页面的最大 veiw 设置为 940px 而不是 1200px，并且让我的 div.wrapper 仍然在页面的中心。

希望这一切都有意义哈哈。

【问题讨论】：

只需从 initializr.com 下载 Bootstrap，您就已经响应了！

标签： html css twitter-bootstrap responsive-design less

【解决方案1】：

要开启响应式布局，您需要在文档的<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 的最大宽度保持在 940 像素。

【讨论】：

【解决方案2】：

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

【讨论】：

好的，非常感谢！现在，如果我想更改布局的最大尺寸，是否要从 responsive.less 文件中删除 @import "responsive-1200px-min.less" （我只是在另一篇文章中读到）？因为现在一切都在拉伸我的屏幕的整个宽度，并且覆盖了我的背景图片/颜色。