Question

可能我错过了某些内容或误解了 BS 文档，如果我使用文本而不是图片，下面的html按预期工作，因为我将图像放在 xs上和 sm 。

按预期我的意思是：＆gt; = md 上的1行8列， sm 上的2行4列， xs上的4行2列

在我的浏览器（Chrome / Firefox）上，行为似乎是：

第一行始终正确
第二行将第一张图片对齐并断开线条（转到下一行）

有什么建议吗？

    <div class="container">
            <div class="row">
                <div class="col-xs-6 col-sm-3 col-md-1 text-center">
                    <img src="http://placehold.it/50x50" />
                </div>
                <div class="col-xs-6 col-sm-3 col-md-2 text-center">
                    <span class="stat-title">999</span><br />text
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 text-center">
                    <img src="http://placehold.it/50x50" />
                </div>
                <div class="col-xs-6 col-sm-3 col-md-2 text-center">
                    <span class="stat-title">999</span><br />text
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 text-center">
                    <img src="http://placehold.it/50x50" />
                </div>
                <div class="col-xs-6 col-sm-3 col-md-2 text-center">
                    <span class="stat-title">999</span><br />text
                </div>
                <div class="col-xs-6 col-sm-3 col-md-1 text-center">
                    <img src="http://placehold.it/50x50" />
                </div>
                <div class="col-xs-6 col-sm-3 col-md-2 text-center">
                    <span class="stat-title">999</span><br />text
                </div>
            </div>
        </div>

Answer 1

我相信它，因为div的高度不同。图像为50px，而文本略小，因此当bootstrap将它们放入列中时，它会看到右列比左侧短，因此它会将下一个图像（第2个）置于其下方第一个文本块。

如果你这样做，它应该有用。

*本质上，您所要做的就是确保div s的高度相等

＆＃13;

div.text-center{
    min-height: 50px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-1 text-center">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center">
            <span class="stat-title">999</span><br />text
        </div>
    </div>
</div>

＆＃13;

Answer 2

我想我看到你正在经历的事情。实际上，这是BS的常见问题。发生了什么事情是第五列有第四列的空间挤压在那里。您可以向列添加自定义类以设置最小高度并强制第五列向下。换句话说，由于未明确定义新行，因此任何大于12的列都会在任何可能的位置挤压自己。您可以通过在自定义类上定义最小高度来等于行中最高元素的高度来解决此问题。

我认为这就是你所看到的：https://jsfiddle.net/ejutc5bf/

这是我的修复：

HTML：

<divhttps://jsfiddle.net/DTcHh/#update class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
            <span class="stat-title">999</span><br />text
        </div>
        <div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
            <img src="http://placehold.it/50x50" />
        </div>
        <div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
            <span class="stat-title">999</span><br />text
        </div>
    </div>
</div>

CSS：

.custom{
    min-height: 100px;
}

Fiddle

*您可能希望制作自己的自定义类并将其应用于该类。如果将其应用于预先存在的类（例如文本中心），则将在以后使用它们时适用于所有这些类。

Answer 3

图像可能比容器div列大。试试这个：

img { max-width: 100% }

Answer 4

为了使您的图像响应，您需要使用img-responsive类。

<img class="img-responsive" src="http://placehold.it/50x50" />

请参阅http://getbootstrap.com/css/#images

bootstrap 3响应网格中断与图像

4 个答案: