使 Bootstrap 元素居中跨设备兼容答案

【问题标题】：Centering a Bootstrap element cross-device compatible使 Bootstrap 元素居中跨设备兼容
【发布时间】：2012-08-25 22:54:59
【问题描述】：

社区，

我最近在寻找设计网页的可能性时偶然发现了 Twitter Bootstrap，而我却无法真正“设计”（编码器陈词滥调，嗯）。我非常喜欢它的即时交叉兼容性，而且由于该网站的规划考虑到了一个博客，我认为移动用户访问它是不可能的。

那个特定的博客是给我带来问题的原因。有一篇关于整个网格的博客文章（span12，宽度最大为 1170 像素）会创建一堵巨大的文字墙，会吓跑所有人。相反，我决定在 span6 中创建（至少是预览版），这对我来说似乎是合理的，并且对移动用户也很有效。但由于我不希望每行超过 1 个，因此我需要以某种方式将其居中，并且我更喜欢“引导方式”。

官方文档向我指出了 .offset* 类，它们在桌面上运行良好，但在切换到移动布局时会保留下来，从而在左侧造成难看的间隙。如果没有偏移，它在移动版本上没有问题（每行 1 个帖子，左右没有间隙），但在桌面上它是左对齐的。这里是代码的相关位：

无偏移，在移动设备上按预期工作：

<div class="row-fluid">
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div><!--/span6-->
</div><!--/row-->

使用偏移，在桌面上按预期工作：

<div class="row-fluid">
    <div class="span6 offset3">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div><!--/span6-->
</div><!--/row-->

有什么方法（没有 JavaScript！）让它表现得像我想要的那样（元素的交叉兼容居中，同时保持其中的所有文本左对齐）？我想我需要更改 bootstrap-responsive.css，但我想避免弄乱原始文件...

【问题讨论】：

如果媒体查询不能正常工作，您可能必须更改它们。如果不编写脚本，另一种方法可能是更改 CSS。
@tahdhaze09 我也对这个问题感兴趣。我正在尝试这样做，如果屏幕足够小，则基本上删除偏移类。我怎样才能做到这一点？我尝试设置 margin-left: 0% 以在小屏幕上偏移类，但没有效果。
@mattgmg1990 - 不需要删除类，只是不要使用它！创建页面的最佳方式是从头开始。我听从了创作者的建议并尝试了这些类，一次添加了一些元素——“通过一些示例布局超越基本模板。我们鼓励人们对这些示例进行迭代，而不是简单地将它们用作结束结果。”。我制作了一个通用页面，它在没有偏移类的情况下做出响应。
@tahdhaze09 当你说“开始页面的最佳方式是从头开始”时，你是不是在提倡根本不使用引导程序。我真的只是想将几个元素放置在它们容器的中心，但仅限于桌面屏幕尺寸。然而，在手机上，我希望所有的东西都能拉伸屏幕的长度。我从您的评论中了解到，您认为我不应该使用偏移量，但是如果没有它们，我该如何具体实现呢？
对不起，@mattgmg1990！我的意思是从引导程序的基础开始，没有所有的花里胡哨。他们有一个基本模板，其中几乎没有任何内容。您可以通过在头部包含基本内容（如 jQuery 和 css 文件）来创建 HTML5 模板页面。从那里，创建你的布局，只是不要使用偏移类。如果您访问他们的入门页面，他们有一些示例和一些基本代码可以使用，它们应该可以为您提供一个响应式网页的良好开端。

标签： html css web twitter-bootstrap

【解决方案1】：

不知何故，我刚刚得到一个想法，结果证明它工作得非常好，没有使用任何 CSS 修改：

为了使用网格系统使元素居中，我们用占位符填充行的其余部分。对于我的 span6-示例

<div class="row-fluid">
    <div class="span3"></div>
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div>
    <div class="span3"></div>
</div>

这会在台式机和平板电脑上生成居中版本，在手机上生成全角版本。但是，由于布局流畅，在移动布局中会有空隙，因为空的 div 也占用了少量空间。但由于这个问题只发生在手机上，我们可以通过将 hidden-phone-class 添加到 placeholder-div 来避免它，如下所示：

<div class="row-fluid">
    <div class="span3 hidden-phone"></div>
    <div class="span6">
        <h3>Blog Post #1 Title</h3>
        <h5>Category, Sub-Category - 01.01.1970</h5>
        <p>Lorem ipsum...</p>
    </div>
    <div class="span3 hidden-phone"></div>
</div>

最后，这就像我想要的那样工作，至少在 Bootstrap 版本 2.1.0 上......

【讨论】：