css - Bootstrap 列调整为较短的列-6ren

css - Bootstrap 列调整为较短的列

转载作者：行者123 更新时间：2023-11-28 10:08:22

<分区>

使用 Bootstrap ，我有一行和两列。第一个包含图像，第二个包含一些文本。我试图在图像高度切断文本。如果没有 JavaScript 和固定高度，这可能吗？

感谢您的帮助!

.row {
  margin: 1rem 0 0 1rem !important;
  max-width: 20rem;
}
div>div {
  border: 1px solid red;
}
.col-5 {
  padding: 0 !important;
}
.col-7 {
  overflow-y: hidden;
  /* How do I make this column as tall as the previous? */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-5">
    <img src="https://booklers.net/images/userImages/Doidel/bookImages/4/thumb.jpg" class="img-fluid" />
  </div>
  <div class="col-7">
    This is some test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text. This is some more test text.
  </div>
</div>

文章推荐： css - RotateX 停止并 overflow hidden

文章推荐： ios - 如何增加特定部分中特定单元格的高度

文章推荐： Swift guard 检查 nil 文件 - 意外发现 nil

文章推荐： css - 按钮加载指示器边框动画

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - Bootstrap 列调整为较短的列