0

我正在使用 Bootstrap 框架，我试图让 .span1 和 .span3 div 在移动尺寸的顶部水平对齐。当浏览器窗口到达断点 (782px) 时，图像的顶部对齐和右侧的文本消失，文本变为水平居中并开始环绕图像。

我是 Stackoverflow 的新手，很难确定要提供多少代码。因此，任何关于我如何形成问题的反馈都会有所帮助。:)

您可以在http://theplaybook.co的推荐部分下查看问题。

.span1 包含图像，.span3 包含文本。这是HTML：

<div class="testimonials">
<div class="row-fluid">
<div class="span1"><img src="/img/tyler.jpg"></div>
<div class="span3">
<p>Just did a beta test of Playbook. I am super impressed."</p>
<p>—Tyler Tervooren</p>
</div>
</div>
</div>

和 CSS：

.testimonials img {
float: left;
}
4

2 回答 2

1

Bootstrap 设置float: none所有网格跨度在小于767px. 您可以通过在 Bootstrap 的 CSS 之后添加以下代码来覆盖 Bootstrap 的所有span*元素或仅特定元素的规则：

@media (max-width: 767px) {
    .testimonials .row-fluid .controls-row [class*="span"] {
        float: left !important;
    }
}
于 2013-05-22T18:39:15.793 回答
0

使用偏移量。此处的文档向您展示了如何：

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

跨度是浮动元素，所以如果你不想使用偏移量，那么你可以使用跨度作为大小，然后覆盖它的浮动属性不浮动，并给它“margin-right”和“margin-left” auto”在一个 div 中使其居中。

于 2013-05-22T18:37:06.497 回答