html - 我怎样才能使 Bootstrap 缩略图的高度相同？

Question

嘿嘿，我正在用 bootstrap 制作我的网站。但是我有一些列问题。我想要包含文本的列，但是当页面变小时，它们开始互相推挤。我该如何解决？

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

问题出在“主页”页面上。还有“diensten”页面和“wie zijn wij”页面。

这是我的代码。

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

Answer 1

这是 Bootstrap 的默认行为。如果内容对于屏幕尺寸而言太大，则将在移动设备上下推列。

它是这样工作的:

类 col-lg-3、col-md-3 和 col-sm-6 覆盖类“行”放置列的方式。

col-lg-3 意味着它将在大尺寸屏幕上使用 3/12 的屏幕尺寸col-md-3 意味着它将使用正常尺寸屏幕尺寸的 3/12col-sm-6 意味着它将在小尺寸上使用屏幕尺寸的 6/12

如果您希望在任何设备上的列都是 4 列，您应该将 col-xs-3 添加到所有这些 div。

它会是这样的:

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

尝试更改最小高度值以恰好适合您在每个页面上需要的高度