Question

在我的html中，内容应该以屏幕为中心，宽度不应超过950px。

由于我希望在移动设备和桌面设备上显示相同的html，因此我使用twitter bootstrap来使布局响应。

问题是：我似乎无法使内容div居中并且最大宽度为950px。

当我在浏览器上打开时，css有这个媒体查询：

@media (min-width: 1200px)

这使我的div始终适合整个屏幕。

我该如何解决这个问题？

基本上我想做的是这样的事情：

Schema

橙色线是容器（或主体），蓝色是行

感谢您的帮助。

修改

我找到的东西可能会帮助别人帮助我

如果我注释掉这一行：

@import "twitter/bootstrap/responsive";

我的div.content保持950px宽度，但我的html失去了响应行为，我不想要

编辑2

html标记：

<html>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          <%= Content goes here %>
        </div>
      </div>
    </div>
  </body>
</html>

但是在浏览器上它创建了这些东西：

body = 100% width, on chrome 1280px
.container = width 1170px
.row = width 1200px
.span12 = width 1170px

只是为了澄清，这不是twitter bootstrap上的问题，这是twitter-bootstrap-rails上的问题

我发现在开发时修复它的方式是使用twitter-bootstrap-rails打开gem-open gem并更改文件：/vendor/toolkit/twitter/bootstrap/responsive.less注释掉这些行：

// LARGE DESKTOP & UP
// ------------------

@media (min-width: 1200px) {

  // Fixed grid
  #grid > .core(70px, 30px);

  // Fluid grid
  #grid > .fluid(5.982905983%, 2.564102564%);

  // Input grid
  #grid > .input(70px, 30px);

  // Thumbnails
  .thumbnails {
    margin-left: -30px;
  }
  .thumbnails > li {
    margin-left: 30px;
  }

}

Answer 1

您可以使用包装器，这将为您提供默认大小940px。

<body>
  <div class="container">
    ...
  </div>
</body>

但是如果您要查看自定义宽度，则应在 application.css 中添加一些css，如下所示：

body .container{
  width:980px;
}

请在此处查看：Bootstrap - Layout

一个很好的布局教程：Filling layout with bootstrap

Answer 2

请务必使用<div class="container">包装您的布局，这将创建一个居中的固定布局。如果这不起作用，那么您的布局可能还有其他问题。如果是这种情况，请使用您的布局HTML更新您的问题。

文档：http://twitter.github.com/bootstrap/scaffolding.html#layouts

Answer 3

在您的自适应媒体查询开始时（在其中任何一个之前），将您的元素设置为“max-width”

body{max-width:1200px;margin:0px auto;}

当您减少浏览器宽度时，您的网站仍会响应，但如果您打开大于1200px（许多不错的宽屏显示器），那么它将保持为1200px容器。

要使其保持居中，超过1200px，请将以下内容添加到同一个容器中

body{max-width:1200px;margin:0px auto;}

以上在元素的左侧和右侧添加了“自动”边距，这意味着它变为居中...（0px只表示顶部和底部没有边距，如果需要，可以添加一些/需要的。

请注意，您不必将所有内容添加到正文中，但这只是意味着它可以在高级别中将其全部删除....

Answer 4

显然这是我正在使用的twitter-bootstrap gem版本中的一个错误。

我删除了那个项目，所以我不能再在那个环境中测试了，在一些新的项目中我再次尝试了twitter-bootstrap，并没有再次看到这个错误。

所以我猜它已经关闭了。谢谢大家

Twitter Bootstrap＆amp; rails - 中心内容并修复最小宽度

4 个答案: