Twitter Bootstrap & rails - 居中内容并修复最小宽度答案

【问题标题】：Twitter Bootstrap & rails - center content and fix min widthTwitter Bootstrap & rails - 居中内容并修复最小宽度
【发布时间】：2012-08-10 04:02:13
【问题描述】：

在我的 html 中，内容应该在屏幕上居中，并且他的宽度永远不能大于 950 像素。

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

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

当我在浏览器上打开 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;
  }

}

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap responsive-design twitter-bootstrap-rails

【解决方案1】：

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

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

但如果您正在寻找自定义宽度，您应该像这样在 application.css 中添加一些 css：

body .container{
  width:980px;
}

在这里查看：Bootstrap - Layout

一个不错的布局教程：Filling layout with bootstrap

【讨论】：

我已经在使用 .container 包装器了。问题是所有行都忽略了正文的宽度，检查我的编辑 2

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

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

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：