Question

社区，

我最近偶然发现Twitter Bootstrap，同时寻找设计网页的可能性而无法实际“设计”（编码器陈词滥调，meh）。我非常喜欢它的即时交叉兼容性，因为该网站计划考虑博客，我认为移动用户不会访问它。

那个特定的博客是导致我出现问题的原因。博客文章跨越整个网格（span12，宽度达1170px）会创建一个巨大的文本墙，可以吓跑所有人。相反，我决定在span6中创建（至少预览），这对我来说似乎是合理的，也适用于移动用户。但是因为我不想每行超过1个，所以我需要以某种方式使它居中，我宁愿选择“Bootstrap方式”。

官方文档向我指出.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，但我想避免搞乱原始文件......

Answer 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 - 类添加到占位符-dc来避免它，如下所示：

<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版本上......

使Bootstrap元素与交叉设备兼容

1 个答案: