3

在我的 html 中，内容应该以屏幕为中心，并且他的宽度不应该大于 950 像素。

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

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

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

@media (min-width: 1200px)

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

我怎样才能解决这个问题？

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

架构

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

谢谢你的帮助。

编辑

只是我发现可能会帮助某人帮助我的东西

如果我注释掉这一行：

@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上的问题

我发现在开发中修复它的方法是使用gem-open打开twitter-bootstrap-rails 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;
  }

}
4

4 回答 4

4

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

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

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

body .container{
  width:980px;
}

在这里查看：Bootstrap - 布局

一个不错的布局教程：使用引导程序填充布局

于 2012-08-10T05:39:46.760 回答
1

在您的响应式媒体查询开始时（在其中任何一个之前），将您的元素设置为具有“最大宽度” 

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

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

为了让它在超过 1200 像素时保持居中，请将以下内容添加到同一个容器中

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

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

请注意，您不必将所有这些都添加到正文中，但这只是意味着它可以在较高级别上将其排除在外....

于 2012-10-17T19:00:05.753 回答
1

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

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

于 2012-08-10T05:26:35.163 回答
0

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

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

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

于 2013-03-20T13:57:24.760 回答