文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >当水平卡片列大小不同时，使引导网卡等高

问当水平卡片列大小不同时，使引导网卡等高
EN

Stack Overflow用户
提问于 2021-10-16 06:15:46
回答 1查看 520关注 0票数 0

我想要什么-我使用自举网卡在一行中创建两张卡片，它们在更宽的屏幕上水平对齐，两者高度相等。我想保留第一张图像(col-md-4，col-md-8)，并制作第二张图像(col-md-5，col-md-7)，以显示卡中更多的图像，但当我这样做时，第二张卡图像的高度会更高。您可以在下面的斯塔克布利茨和图像中看到这一点。

问题-第一个图像是1:1，第二个图像是16:9，我想要更多的第二个图像(16:9)显示(更宽)在第二张卡。但是在第二个图像中增加列大小会增加高度，这不是我想要的。

Stackblitz - 组件，url

我尝试了什么-我可以并且已经创建了2张卡片，它们都是在卡片中使用一行和列(col-md-4，col-md-8)的水平放置方式，这使得图像都具有相同的高度。我在每张卡片上都用了"h-100“类。但是，当我将第二个图像的列更改为(col-md-5，col-md-7)以显示更多的图像时，卡的大小会增加，从而导致第一张卡的大小不正确。

我想我可以说的另一种方式是，我不希望图片比文本(右侧列)扩展得更高。

这是我的Stackblitz的照片。上面的行是我对每个图像都有相同的列，而下面的行是当我增加第二个图像的列的大小时。注意-我不想增加高度，只想增加宽度。

​

​

这是我正在使用的代码。

​

代码语言：javascript
运行
复制
<div class="container my-3 my-xl-5">
  <div class="row">
    <div class="col-lg-3">
      some text
    </div>
    <div class="col-lg-9">
      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-5">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-7">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

​

html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

发布于 2021-10-16 10:54:57

Targetting the image column的卡通过创建一个class为我工作。

例如，，

这里是一张卡片的HTML 1# 。。

代码语言：javascript
运行
复制
<div class="col mb-4 bg-green1">
          <div class="card h-100">
            <div class="row no-gutters">
              <div class="col-md-4 my-custom-class">
                <picture>
                  <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                </picture>
              </div>
              <div class="col-md-8">
                <div class="card-body py-1">
                  <div class="row">
                    <div class="col-12">
                      <h5 class="card-title d-inline">Brad</h5>
                      <span class="float-right center-star">4.4</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <span>Level</span>
                      <span class="float-right">3</span>
                    </div>
                    <div class="col-12">
                      <span>Experience</span>
                      <span class="float-right">Expert</span>
                    </div>
                    <div class="col-12">
                      <span>Instructed</span>
                      <span class="float-right">14</span>
                    </div>
                    <div class="col-12">
                      <span>Education</span>
                      <span class="float-right">None</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

my-custom-class我创建了一个类2#来锁定图像区域。

代码语言：javascript
运行
复制
<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>

3# 这里是我编写的CSS属性

代码语言：javascript
运行
复制
.my-custom-class{
   min-height: 130px;
   overflow: hidden;
}

注意:它不会在卡的响应性方面造成任何问题。

结果

Desktop Version

​

​

Responsive Version

​

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69593168

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档