Bootstrap 3响应网格中断与图像

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

我的意思是:1行8列>= md， 2行4列sm， 4行2列xs。

在我的浏览器(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>

我相信这是因为你们的div的高度不同。图像是50px，而文本略短，所以当bootstrap将它们放在它们的列中时，它会看到右列比左列短，所以它会将下一个图像(第二)放在第一个文本块下。

如果你这样做，它应该工作。

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

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

<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>

我想我明白你的感受。实际上，这是胡扯的常见问题。现在的情况是第五纵队在第四纵队下面有空间可以挤进去。您可以向列添加一个自定义类，以设置最小高度并强制第五列向下。换句话说，由于没有显式定义新行，因此任何大于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;
}

小提琴

*您可能想要创建自己的自定义类并将其应用于该类。如果你把它应用到一个已经存在的类上(比如text-center)，那么当这些类将来被使用的时候，它也会应用到所有这些类上。

图片可能比它们的容器div列大。试试这个:

img { max-width: 100% }

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

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

看到http://getbootstrap.com/css/图片

相关内容

最新更新

热门标签：