如何使Bootstrap缩略图高度相同？

Question

如何使Bootstrap缩略图高度相同？

htmlcsstwitter-bootstrap

3

嘿，我正在使用Bootstrap制作我的网站，但是我遇到了一些列问题。我想要有一些带文本的列，但是当页面变小时，它们开始相互推挤并下移。我该如何解决这个问题？

我的网站是：http://www.dev-bunker.nl

这个问题出现在“主页”、“服务”和“关于我们”页面上。

以下是我的代码：

<div class="container">
            <div class="row">
                <h2 class="title">
                    Onze werkwijze
                </h2>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <div class="thumbnail">
                        <img src="http://dev-bunker.nl/wp-content/uploads/2016/09/bedenken.png">
                        <div class="caption">
                            <h2>Bedenken</h2>
                            <p>
                                Het bedenken is het eerste onderdeel van het proces. Tijdens dit onderdeel gaan we met de klant, maar ook met het team, nadenken over het de huisstijl, indeling, de inhoud en alles wat er om heen draait.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <div class="thumbnail">
                        <img src="http://dev-bunker.nl/wp-content/uploads/2016/09/design-icon.png">
                        <div class="caption">
                            <h2>Ontwerpen</h2>
                            <p>
                                Tijdens de ontwerp fase maken we wireframes en volledige ontwerpen, samen met de klant bespreken we de ontwerpen. Wanneer de klant deze heeft goed gekeurt gaat de realisatie fase beginnen.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <div class="thumbnail">
                        <img src="http://dev-bunker.nl/wp-content/uploads/2016/09/realisatie.png">
                        <div class="caption">
                            <h2>Realiseren</h2>
                            <p>
                                Met de realisatie fase gaan we met het team aan de website of applicatie werken. Deze proberen wij gelijk te maken aan het ontwerp, zodat de klant precies weet wat hem / haar te wachten staat.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6">
                    <div class="thumbnail">
                        <img src="http://dev-bunker.nl/wp-content/uploads/2016/09/check.png">
                        <div class="caption">
                            <h2>Uittesten &&nbsp;nazorg</h2>
                            <p>
                                Als de website of applicatie klaar is, krijgt de klant hem te zien. Als er dingen niet kloppen of er werken stukken van de website / applicatie niet. Gaan wij verder tot alles werkent is.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div> <!-- end container -->

- Dev Bunker

编辑：实际上，阻止这些元素向左和向下滑动的原因是第一个div的高度比下一个长。我相信使用Bootstrap可以强制使这些div具有相同的高度。 - NSTuttle

是的，但是怎么做呢..哈哈，我已经在互联网上搜索过了，但是找不到任何东西..人们已经使用了PHP、JavaScript和jQuery..但我不知道如何在我的代码中使用它。 - Dev Bunker

尝试为你的.thumbnail类添加一个强制高度，例如height:450px应该适合你。你也可以为此创建另一个类，并将其放置在相关的HTML元素上。这只是一种解决方案，Bootstrap应该能够处理所有这些。如果以上建议完全不起作用，我会继续研究它。 - NSTuttle

好的，我会尝试。但是在Bootstrap中没有选项可以使缩略图大小相同吗？所以当一个缩略图有100个单词，而另一个缩略图只有10个单词时，它们的大小都相同。即使你让其中一个缩略图有1000个单词，它们也会变成相同的大小。如果你知道我的意思的话。 - Dev Bunker

找到了解决方法，请查看下面的答案。 :) - NSTuttle

2个回答

2

如果您能使用Bootstrap 4，他们添加了.row-eq-height，让您可以完全按照您想要的方式进行操作。

只需用Bootstrap 4 CDN替换Bootstrap 3中的，然后在包含所有

的行中添加row-eq-height，即可完成。我在控制台中测试了一下，一切看起来都很好。希望这对您有所帮助。

- NSTuttle

这也适用于将缩略图制作成相同的尺寸吗？ - Dev Bunker

更新了图片，你找的到了吗？ - NSTuttle

现在那就是我想要的。你可以向我展示一下你在代码中是如何做到的吗？ - Dev Bunker

很奇怪...在我们是谁页面（您现在所在的页面）上它很好，但在服务页面上不好。 - Dev Bunker

在此时，至少在/如果您找到另一个选项之前，请使用上述内容以及.thumbnail { min-height: 350px; } 或任何能够覆盖最大缩略图容器的高度。 - NSTuttle

显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stormhashe · Accepted Answer

这是Bootstrap的默认行为。如果内容超出屏幕大小，它将在移动设备上向下推动列。

它的工作原理如下：

类col-lg-3、col-md-3和col-sm-6覆盖了“row”类如何放置列。

col-lg-3指它将在大尺寸屏幕上使用3/12的屏幕大小；

col-md-3指它将在常规尺寸屏幕上使用3/12的屏幕大小；

col-sm-6指它将在小尺寸屏幕上使用6/12的屏幕大小。

如果您想使所有设备上的列都成为4列，您应该为所有这些div添加col-xs-3。

就像这样：

<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">

col-xs-3类告诉Bootstrap在移动设备上使用4列。

更新

为这些div中的每一个添加一个类，并设置最小高度。

HTML

<div class="col-lg-3 col-md-3 col-sm-6 myTestClass">

CSS

.myTestClass: min-height: 550px;

尝试调整最小高度值以适应每个页面所需的精确高度