4

社区，

我最近在寻找设计网页的可能性时偶然发现了 Twitter Bootstrap，但实际上却无法“设计”（coder-cliché，meh）。我非常喜欢它的即时交叉兼容性，并且由于该网站是在考虑博客的情况下计划的，我不认为它不可能被移动用户访问。

而那个特定的博客就是给我带来问题的原因。拥有一篇关于整个网格的博客文章（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，但我想避免弄乱原始文件......

4

1 回答 1

4

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

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

<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 上，这就像我想要的那样工作......

于 2012-08-25T14:54:59.783 回答