css - 将不同 Bootstrap 列的子元素设置为相同的高度-6ren

css - 将不同 Bootstrap 列的子元素设置为相同的高度

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

我需要设置这些元素的高度，使不同列中相同颜色的边框高度相同。我不想使用 javascript。这些元素中有动态内容，所以我不能使用固定高度。裁剪文本也是不可取的。我听说过 flexboxes 和 display: content 但我不知道在这种情况下如何使用它。谁能帮忙？


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css problem</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .headline{
      border-bottom: solid 1px red;
    }
    .subline{
      border-bottom: solid 1px blue;
    }
    .text-block{
      border-bottom: solid 1px orange;
    }
  </style>
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headdline 1</h1>
        <p class="subline">subline 1 - Lorem ipsum dolor sit amet</p>
      </header>
      <div class="text-block">
        <p>
          text-block 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headline 2 - Lorem ipsum </h1>
        <p class="subline">subline - 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec.</p>
      </header>
      <div class="text-block">
        <p>text-block 2- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec,
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
        </p>
      </div>
    </div>
    <div class="col-sm-4">
      <header>
        <h1 class="headline">headline 3 - Lorem ipsum </h1>
        <p class="subline">subline 3 -  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </header>
      <div class="text-block">
        <p>
          text-block 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
          elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
          vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
          Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
          rhoncus, sem quam semper libero
        </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

最佳答案

请检查 css。已经编写了一些 css 并将其与 Bootstrap 类一起使用。核实。

根据您的要求更改min-height: ***px;

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>css problem</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .headline{
      border-bottom: solid 1px red;
    }
    .subline{
      border-bottom: solid 1px blue;
    }
    .text-block{
      border-bottom: solid 1px orange;
    }
    .col-container {
      display: flex;
      width: 100%;
      }
    .col {
        flex: 1;
        padding: 16px;
        border: 1px solid red;
    }
    .headline {
      min-height: 120px;
    }
    .subline{
      min-height: 170px;
      }
      .text-block{
        min-height: 670px;
      }
  </style>
</head>

<body>
<div class="container">
  <div class="row col-container">
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headdline 1</h1>
        <p class="subline">subline 1 - Lorem ipsum dolor sit amet</p>
      </header>
      <div class="text-block">
        <p>
          text-block 1 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
        </p>
      </div>
    </div>
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headline 2 - Lorem ipsum </h1>
        <p class="subline">subline - 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec.</p>
      </header>
      <div class="text-block">
        <p>text-block 2- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec,
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
        </p>
      </div>
    </div>
    <div class="col-sm-4 col">
      <header>
        <h1 class="headline">headline 3 - Lorem ipsum </h1>
        <p class="subline">subline 3 -  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </header>
      <div class="text-block">
        <p>
          text-block 3 - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
          fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
          vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus
          elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
          vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
          viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.
          Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum
          rhoncus, sem quam semper libero
        </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

关于css - 将不同 Bootstrap 列的子元素设置为相同的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50899294/

文章推荐： c++ - 将 char 数组转换为字符串时的数据丢失

文章推荐： javascript - HTML5文件读写同步

文章推荐： javascript - 从中心向右动画div(css或jquery)

文章推荐： html - 以未损坏的 border-radius 滚动

c++ - if 中的多个语句是否与多个 if 相同？
是 if(a == 0 && b == 0 && c == 0) { return; } 一样 if(a == 0) { return; } if(b == 0) { return; } if(c =
Java继承-如何设置子类实例的值以供其他子类共享(相同)？
我想做这样的事情: Class A Class B extends A Class C extends A B b = new B(); C c = new C(); b->setField("foo
Mysql查询(相同)不同的结果集返回不同的结果顺序
我对 Mysql 世界很天真......:)我试图使用连接从表中查询，我遇到结果集问题...表结构如下下面... VIDEO_XXXXX | Field | Type
java - 相同(？)对象的不同对象引用
我最近问过关于从另一个类获取类的唯一实例的问题。 ( How to get specific instance of class from another class in Java? ) 所以，我正
c++ - 比较两种类型是否为 "literally"相同
假设我们有两种类型 using t1 = int*; using t2 = int*; 我知道 std::is_same::value会给我们true .什么是，或者是否有模板工具可以实现以下目标？
PHP - 为什么比较两个完整的长(相同)字符串比比较每个字符串的第一个字符要快得多？
对于我的一个应用程序，我假设比较 2 个字符串的第一个字符比比较整个字符串是否相等要快。例如，如果我知道只有 2 个可能的字符串(在一组 n 字符串中)可以以相同的字母开头(比如说 'q')，如果是这
c - 相同(重复)代码的时钟周期值不同
我想在我的NXP LPC11U37H主板（ARM Cortex-M0）上分析一些算法，因为我想知道执行特定算法需要多少个时钟周期。我编写了这些简单的宏来进行一些分析： #define START_C
excel - 如何在所有工作表中保持页眉(不是静态页眉)相同？
我在 Excel 中创建了一个宏，它将在 Excel 中复制一个表格，并将行除以我确定的特定数字(默认 = 500 行)，并为宏创建的每个部门打开不同的工作表。使用的代码是这样的: Sub Copy
python - 如果一个字典的值与第二个字典的键和第二个字典值 Python 相同
我想根据第一个字典对第二个字典的值求和。如果我有字典 A 和 B。 A = {"Mark": ["a", "b", "c", "d"], "June": ["e", "a"], "John": ["a
perl - system() 返回的值是否与 "$?"相同？
当我这样做时 system()在 Perl 中调用，我通常根据 perldocs 检查返回码.嗯，我是这么想的。大部分时间 $rc!=0对我来说已经足够了。最近我在这里帮助了两个遇到问题的人syste
javascript - 进度条加载速度与 div 相同
在我的进度条上，我试图让它检测 div 加载速度。如果 div 加载速度很快，我想要实现的目标将很快达到 100%。但进度条的加载速度应该与 div 的加载速度一样快。问题:如何让我的进度条加载
Firebase 服务器时间戳与本地(几乎)相同
当我获得与本地时间相同的时间戳时，firebase 生成的服务器时间戳是否会自动转换为本地时间，或者我错过了什么？ _firestore.collection("9213903123").docume
semantics - OWL 双关语是否将同名的类和个体在语义上视为“相同”？
根据the original OWL definition of OWL DL ，我们不能为类和个体赋予相同的名称(这是 OWL DL 和 OWL Full 之间的明显区别)。 "Punning" i
javascript - 允许两个输入复选框的行为与 jquery 相同
我有两个输入复选框: 尝试使用 jQuery 来允许两个输入的行为相同。如果选中第一个复选框，则选中第二个复选框。如果未检查第 1 个，则不会检查第 2 个。反之亦然。我有代码: $('inpu
java - 相同 Java 文件的编译
可以从不同系统编译两个相同的java文件，但它们都有相同的内容操作系统(Windows 7)，会生成不同的.class文件(大小)？最佳答案是的，您可以检查是否有不同版本的JDK(Java Dev
regex - 正则表达式 - .*$ 与 .* 相同
我正在清理另一个人的正则表达式，他们目前所有的都以结尾 .*$ 那么下面的不是完全一样吗？ .* 最佳答案 .*将尽可能匹配，但默认情况下为 .不匹配换行符。如果您要匹配的文本有换行符并且您处于 MU
TypeScript:与Pick <...>相同，但具有多个字段
我使用 Pick ，但是如何编写可以选择多个字段的通用PickMulti呢？ interface MyInterface { a: number, b: number, c: number
sql - 相同 SQL 查询在一个数据库中运行的时间比在同一服务器下的另一个数据库中运行的时间长
我有一个 SQL 数据库服务器和 2 个具有相同结构和数据的数据库。我在 2 个数据库中运行相同的 sql 查询，其中一个需要更长的时间，而另一个在不到 50% 的时间内完成。他们都有不同的执行计划。
php - 使列与 id 相同
我需要你的帮助，我有一个包含两列的表，一个 id 和 numpos，我希望 id 和 numops 具有相同的结果。例子: $cnx = mysql_connect( "localhost", "r
PHP - 表 ID 相同
如何将相同的列(在本例中按“级别”排序)放在一起？我正在做一个高分，我从我的数据库中按级别列出它们。如果他们处于同一级别，我希望他们具有相同的 ID。但是我不想在别人身上显示ID。只有第一个。这是一

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 将不同 Bootstrap 列的子元素设置为相同的高度