有懂bootstrap4的大神吗？请教个问题

漂移弟

不懂代码，靠着bootstrap4文档和百度做了个单页！
页面demo https://www.2333gif.com/list
用到了card组件，部分代码如下（代码放在了最后面）
现在问题来了，各个card组件的高度不一致，在手机上看会有图中红框中这种尴尬的布局（电脑还没那么明显）
查了一下貌似弄懂flex能解决这个问题，看了半天硬是没搞懂
唉 先睡觉了，懂的MJJ来帮忙看一下

1. <div class="row" style="padding-left:11px;padding-right:11px">
   
2.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
   
3.                         <a  class="text-decoration-none text-reset">
   
4.                                 <div class="card border-info">
   
5.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909377-9a17f782-d9a1-42d9-be46-7a300db64436.jpeg" class="card-img-top" alt="...">
   
6.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
   
7.                                                 <h5 class="card-title"><strong>厚颜无耻之人</strong></h5>
   
8.                                                 <p class="card-text">我从未见有如此厚颜无耻之人GIF——诸葛亮王朗对骂表情包制作！</p>
   
9.                                         </div>
   
10.                                 </div>
    
11.                         </a>
    
12.                 </div>
    
13.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
    
14.                         <a  class="text-decoration-none text-reset">
    
15.                                 <div class="card border-info">
    
16.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909374-ce1ffb94-27e6-4bb2-8107-bf090d2f175d.jpeg" class="card-img-top" alt="...">
    
17.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
    
18.                                                 <h5 class="card-title"><strong>你好骚哦</strong></h5>
    
19.                                                 <p class="card-text">近期很火的你好骚哦GIF！“你怎么穿着品如的衣服”，世贤表情包制作！</p>
    
20.                                         </div>
    
21.                                 </div>
    
22.                         </a>
    
23.                 </div>
    
24.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
    
25.                         <a  class="text-decoration-none text-reset">
    
26.                                 <div class="card border-info">
    
27.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909332-b2f52da0-e011-44f1-bb18-00a8878fe265.jpeg" class="card-img-top" alt="...">
    
28.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
    
29.                                                 <h5 class="card-title"><strong>猩球崛起</strong></h5>
    
30.                                                 <p class="card-text">电影猩球崛起表情包！独家GIF制作！</p>
    
31.                                         </div>
    
32.                                 </div>
    
33.                         </a>
    
34.                 </div>
    
35.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
    
36.                         <a  class="text-decoration-none text-reset">
    
37.                                 <div class="card border-info">
    
38.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909331-3dca0f85-39a2-4ef0-8ae8-13bc4951edb2.jpeg" class="card-img-top" alt="...">
    
39.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
    
40.                                                 <h5 class="card-title"><strong>假面骑士</strong></h5>
    
41.                                                 <p class="card-text">“去死吧，傻逼女人！我要跟游戏过一辈子！”——假面骑士超贱表情GIF制作</p>
    
42.                                         </div>
    
43.                                 </div>
    
44.                         </a>
    
45.                 </div>
    
46.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
    
47.                         <a  class="text-decoration-none text-reset">
    
48.                                 <div class="card border-info">
    
49.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909331-1c8dab1b-9301-4dea-90e6-12f5ac1e2956.jpeg" class="card-img-top" alt="...">
    
50.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
    
51.                                                 <h5 class="card-title"><strong>压力大爷</strong></h5>
    
52.                                                 <p class="card-text">“现在的媒体啊，净扯淡！整天宣扬什么熬夜对身体不好。你看我今年28岁，多精神！”——压力大爷GIF表情包制作</p>
    
53.                                         </div>
    
54.                                 </div>
    
55.                         </a>
    
56.                 </div>
    
57.                 <div class="col-6 col-md-3" style="padding-left:4px;padding-right:4px;padding-top:20px">
    
58.                         <a  class="text-decoration-none text-reset">
    
59.                                 <div class="card border-info">
    
60.                                         <img src="https://cdn.nlark.com/yuque/0/2019/jpeg/335619/1559835909285-0f38e32c-e164-4f09-99f7-f6d089664fa5.jpeg" class="card-img-top" alt="...">
    
61.                                         <div class="card-body" style="padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px">
    
62.                                                 <h5 class="card-title"><strong>真香+为所欲为</strong></h5>
    
63.                                                 <p class="card-text">王境泽真香+为所欲为船新版本！</p>
    
64.                                         </div>
    
65.                                 </div>
    
66.                         </a>
    
67.                 </div>
    
68. </div>

复制代码

鱼板面

如果想固定大小，自己手动指定一下高度就行了

1. .card {
   
2.     height: 280px;
   
3. }

复制代码

30826

感觉能学懂BS4这种都能原生写一个界面了……

XiaoFaye

鱼板面 发表于 2019-6-7 07:09
如果想固定大小，自己手动指定一下高度就行了

估计他不是要固定高度，而是像瀑布流那样自适应吧。

aRNoLD

估计是grid没弄对

方块李

flex，我都要忘了，flex就是盒子，你就当积木来看就行了。
反正我也忘差不多了，楼主自己研究吧，如果是像pin那样的瀑布流，嗯，我不会

vps1

大佬这个站不错啊

loc2019

参考一下：carousel，无论多少内容，都是平整的