1

我做了这个响应式布局。它工作正常，直到屏幕的宽度小于 800 像素，它被搞砸了。

我该如何解决这个问题，以便徽标只是“缩小”并且不会在彼此下方重新排列？

http://jsfiddle.net/hashie5/Pnc3g/

html:

<div class="container">
<div class="testimonials row-fluid">
    <div class="span6">
        <div class="row-fluid">
            <div class="span12"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
            <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
        </div>
        <div class="row-fluid">
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
        </div>
        <div class="row-fluid">
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
            <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div>
        </div>
    </div>
    <div class="span6">
        <div class="quote">
            <div class="text">
                <em>Congratulations! It is really a great tool, it is very friendly for us. Creating a new message is so easy with your smart builder. Thank you for that. 10/10</em>
            </div>
            <div class="author">JUAN ISAAC RODRIGUEZ, Credit Report, Peru.</div>
        </div>
    </div>
</div>

CSS：

.testimonials {
    background-color:#f7f7f7;
}
.quote {
    background: url("http://www.flexmail.net/images/quote_home.gif") left top no-repeat;
    height: 128px;
    margin: 20px auto 0 auto;
    padding: 20px;
}
.quote .text {
    color: #444444;
    line-height: 22px;
}
.quote .author {
    color: #666666;
    float: left;
    font-family:'colaboratelightregular';
    font-size: 12px;
    line-height: 22px;
    margin: 10px 0 0;
}
4

1 回答 1

0

在较窄的窗口中，每个都spanX将成为宽度为 100% 的行。这就是导致你一团糟的原因:)

也许这是一个替代解决方案，但不是最好的，因为我们在 html 代码中复制了图像。

我添加了一些CSS

.visible-phone img {
    float: left;
    width: 25%;
}

还有一些html

<div class="row-fluid visible-phone">
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a>
</div>

所有图像在 html 中出现两次。注意包装图像的类visible-phone和shidden-phone上。div

http://jsfiddle.net/Pnc3g/5/

于 2013-04-04T11:50:57.190 回答