0

我正在尝试自定义由 LESS 代码驱动的“响应式”Bootstrap 主题，但遇到了一些我无法解决的问题。首先，让我向您展示代码：

这是HTML：

<div class="row-fluid">
    <div class="span7">
        <div class="hero-unit">
            <h2 class="gw-tweak2">This is line 1.</h2>
            <h1 class="gw-tweak2">This is (big) line 2.</h1>
        </div>
    </div>
    <div class="gw-tweak3 span5">
        <img src="img/portrait-square-nobkgd-250sq.png" />
    </div>
</div>

这是相关的LESS代码：

.hero-unit {
    background-color: @backgd-color;

    h2.gw-tweak2 {
        color: lighten(@subhead-color, 6%);
        font-size: 22px;
    }
    h1.gw-tweak2 {
        color: darken(@subhead-color, 8%);
        font-size: 44px;
    }
}

div.row-fluid>div.gw-tweak3 {    // gw: applies to the span4 div 
                                 //   that contains the portrait img
    float: left;
}

我试图通过使用“gw-tweak2”和“gw-tweak3”类缩小规则选择器来防止我的更改可能导致的副作用。（仅供参考，“gw-”在那里，所以我可以快速找到我的更改。）

HTML 代码描述了我网页的水平部分。左边是 Bootstrap 所说的“英雄单元”（把它想象成一个格式化的文本框），右边是一张 250x250 像素的照片。

对于那些不知道“响应式”是什么意思的人来说，这意味着随着网页宽度的缩小，页面的各种元素会调整大小并重新排列，以使生成的页面始终看起来不错。（这样，相同的网页在计算机、平板电脑和智能手机上看起来都可以接受。）

这是我想要的效果（在最适合台式电脑的网页尺寸范围内）：随着网页宽度的减小，英雄单元的高度增加。发生这种情况时，图像会向下移动，使其相对于英雄单位的高度垂直居中。

以下是实际发生的情况：有一段时间，图像的垂直定位保持不变。然后在某个时刻，图像开始缩小，同时开始向假想的水平线漂移，该水平线穿过英雄单位的顶部边界（即，该代码定义的区域的开始）。

这是一个似乎与问题密切相关的观察：当我使用 Firebug 突出显示给定 HTML 标记“覆盖”的区域时，我发现“span7”区域（英雄单元）的高度和“span5”区域不同。（我假设 Bootstrap 会使它们都具有相同的高度——毕竟，“行流体”div似乎代表网页的一个矩形切片。）此外，随着网页变窄，“span5”元素的区域收缩以完全覆盖img收缩。

也许无能为力；我看过一些网页说垂直居中元素不是 HTML 所做的事情。但是，即使是对 Bootstrap 为何表现出我所描述的方式的一些见解，也可以帮助我以一种使结果不那么可怕的方式来修改当前的行为。

4

1 回答 1

0

他们不需要定义 gw-tweak3 因为结构已经设置为浮动。唯一要做的就是使图像宽度100％......

div.row-fluid > div.gw-tweak3 {   
    float: left; // Remove this
    img { 
      width:100%; margin:10px 0; vertical-align:middle;
    } // Add this
}
于 2013-03-29T07:00:53.890 回答