1

I have a bootstrap website that's setup statically, it doesn't adjust according to different view sizes. So I would like to make it responsive but not sure how. I'm also using LESS to do my modifications and such to the twitter bootstrap css. So far my site is set up like so..

<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>

Also, the website was built for 940px so when I make it responsive I want to set the maximum veiw of the page to 940px instead of 1200px and have my div.wrapper still in the center of the page.

Hopefully all this makes sence haha.

4

2 回答 2

1

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

于 2013-03-05T16:42:59.913 回答
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 像素。

于 2013-03-05T16:58:12.163 回答