将Static Bootstrap网站转换为Responsive

我有一个静态设置的引导程序网站，它不会根据不同的视图大小进行调整。所以我想让它响应，但不知道如何。我也使用LESS来做我的修改和这样的twitter引导CSS。到目前为止，我的网站设置像这样..

将Static Bootstrap网站转换为Responsive

<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，而不是1200像素和让我的div.wrapper仍然在页面的中心。

希望所有这一切使得哈哈。

来源

2013-03-05 user2136378

只需从http://www.initializr.com/下载Bootstrap，并且您已经响应了！ – 2013-03-05 16:33:09

要打开响应式布局，你需要在你的文档的<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。

来源

2013-03-05 16:58:12 GvM

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

来源

2013-03-05 16:42:59

好吧非常感谢！现在，如果我想要更改布局的最大大小，请从responsive.less文件中删除@import“responsive-1200px-min.less”（我刚刚在另一篇文章中阅读）？因为现在所有的东西都在拉伸我的屏幕的整个宽度，并且它覆盖了我的背景图片/颜色。 – user2136378 2013-03-05 17:02:13

将Static Bootstrap网站转换为Responsive

回答

相关问题