Question

Heeyy，我正在使用bootstrap创建我的网站..但我有一些列问题。我想要包含文本的列，但是当页面变小时，它们会开始相互推动。我该如何解决这个问题？

问题出在“主页”页面上。还有“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覆盖类“row”放置列的方式。

col-lg-3意味着它将在大尺寸上使用屏幕尺寸的3/12 col-md-3意味着它将使用正常尺寸的3/12屏幕尺寸 col-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;

尝试更改最小高度值以恰好适合每页所需的高度

Answer 2

如果您能够使用Bootstrap 4，则会在.row-eq-height中添加，以便您完全按照自己的意愿进行操作。

只需更换Bootstrap 3 <link>并替换为Bootstrap 4 CDN

然后将row-eq-height添加到包含所有<div>和你的设置的行中。我在控制台测试，看起来都很好。希望它适合你。

如何制作相同高度的bootstrap缩略图？

2 个答案: