使相邻列中的list-group-items具有相同的高度

Question

我有一系列Bootstrap列，其中包含一个面板，每个面板中都有一个列表组。

每个列表组包含相同数量的项目，但由于文本不同，每个list-group-item的高度不同，导致它们在页面上错位。

我希望每个list-group-item对齐，以获得表格的外观。我可以通过给list-group-item一个高度值来实现这一点，但由于文本是动态的并且可能会改变，因此这不是一个完美的解决方案。

理想情况下，我想要一个没有JavaScript的CSS解决方案。

我目前的HTML在下面。您可能需要全屏打开代码段以避免Bootstrap列问题。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>People</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            Results in death or permanent disability of employees.
          </li>
          <li class="list-group-item">
            Results in partial permanent disability, injuries or illness of 3 employees or more.</li>
          <li class="list-group-item">
            Injury or illness resulting in one or more work days lost.
          </li>
          <li class="list-group-item">
            Minor illness or injury to employees resulting in one day's absence.</li>
          <li class="list-group-item">Minor illness or injury to employees with no absent days.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Environment</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Irreversible environmental damage.</li>
          <li class="list-group-item">Reversible environment damage.</li>
          <li class="list-group-item">Mitigable environment damage where restoration activities can be done.</li>
          <li class="list-group-item">Little environmental damage.</li>
          <li class="list-group-item">Minimal environmental damage.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Financial</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Amount of loss: 1M or more.</li>
          <li class="list-group-item">Amount of loss: 200,000 but less than 1M.></li>
          <li class="list-group-item">Amount of loss: 10,000 but less than 200,000.</li>
          <li class="list-group-item">Amount of loss: 5,000 but les than 10,000.</li>
          <li class="list-group-item">Amount of loss: Less than 5,000.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

我希望它看起来像使用固定的高度：

.list-group-item {
  height:50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>People</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            Results in death or permanent disability of employees.
          </li>
          <li class="list-group-item">
            Results in partial permanent disability, injuries or illness of 3 employees or more.</li>
          <li class="list-group-item">
            Injury or illness resulting in one or more work days lost.
          </li>
          <li class="list-group-item">
            Minor illness or injury to employees resulting in one day's absence.</li>
          <li class="list-group-item">Minor illness or injury to employees with no absent days.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Environment</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Irreversible environmental damage.</li>
          <li class="list-group-item">Reversible environment damage.</li>
          <li class="list-group-item">Mitigable environment damage where restoration activities can be done.</li>
          <li class="list-group-item">Little environmental damage.</li>
          <li class="list-group-item">Minimal environmental damage.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Financial</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Amount of loss: 1M or more.</li>
          <li class="list-group-item">Amount of loss: 200,000 but less than 1M.></li>
          <li class="list-group-item">Amount of loss: 10,000 but less than 200,000.</li>
          <li class="list-group-item">Amount of loss: 5,000 but les than 10,000.</li>
          <li class="list-group-item">Amount of loss: Less than 5,000.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

任何人都可以建议（最好）使用CSS来让每个list-group-item在整个行中对齐吗？

Answer 1

由于您的列表位于不同的元素中，因此大多数css只能用于实现此目的的方法不在窗口范围内（例如，边距/填充黑客）

你可以做的是，对每个屏幕尺寸上最长文本的行数进行有根据的猜测，并将所有.list-group-item s的最小高度设置为该值（我使用过{ {1}}在这里单位，但你可以使用任何适合你的东西）。

首先使用最大屏幕尺寸，然后使用媒体查询（例如em）覆盖较小屏幕。

这适用于所有浏览器，但IE的某些旧版本除外。

注意：请全屏打开代码段以在大屏幕上查看其效果。

<强>更新

根据您提供的新信息，您可以使用我的解决方案进行操作：

将用户可以输入的文本的最大长度限制为合理的长度（例如，250个字符），并将项目高度固定为最长文本可能产生的高度。在测试文本中使用长单词来检查行号可能有多大差异。

＆＃13;

＆＃13;

@media (max-width: 768px)

＆＃13;

.list-group-item {
  min-height:6em; // this is it
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以通过添加媒体查询来执行此类操作。

.panel{ height: 400px;}/*set height according to the first panel*/

对所有屏幕尺寸的设备执行此操作，如下所示。

您还可以添加一些填充（顶部和底部）以列出Panel-的项目。
 和小组-3。
快乐编码： - ）

＆＃13;

＆＃13;

/* Large desktops and laptops */
@media (min-width: 1200px) {
.panel{
height: 400px ! important;}
  .list-group-2 .list-group-item{
  padding-top: 18px! important;
  padding-bottom: 18px! important;}
  
  .list-group-3 .list-group-item{
  padding-top: 18px! important;
  padding-bottom: 18px! important;}    
     
}


/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
.panel{
height: 510px ! important;}
  .list-group-2 .list-group-item{
  padding-top: 16px! important;
  padding-bottom: 16px! important;}
  
  .list-group-3 .list-group-item{
  padding-top: 16px! important;
  padding-bottom: 16px! important;}
}

/* Portrait phones and smaller */
@media (max-width: 480px) {
.panel{
height: 510px ! important;}
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>People</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            Results in death or permanent disability of employees.
          </li>
          <li class="list-group-item">
            Results in partial permanent disability, injuries or illness of 3 employees or more.</li>
          <li class="list-group-item">
            Injury or illness resulting in one or more work days lost.
          </li>
          <li class="list-group-item">
            Minor illness or injury to employees resulting in one day's absence.</li>
          <li class="list-group-item">Minor illness or injury to employees with no absent days.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Environment</h2>
        </div>
        <ul class="list-group list-group-2">
          <li class="list-group-item">Irreversible environmental damage.</li>
          <li class="list-group-item">Reversible environment damage.</li>
          <li class="list-group-item">Mitigable environment damage where restoration activities can be done.</li>
          <li class="list-group-item">Little environmental damage.</li>
          <li class="list-group-item">Minimal environmental damage.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Financial</h2>
        </div>
        <ul class="list-group list-group-3">
          <li class="list-group-item">Amount of loss: 1M or more.</li>
          <li class="list-group-item">Amount of loss: 200,000 but less than 1M.></li>
          <li class="list-group-item">Amount of loss: 10,000 but less than 200,000.</li>
          <li class="list-group-item">Amount of loss: 5,000 but les than 10,000.</li>
          <li class="list-group-item">Amount of loss: Less than 5,000.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个

修复list-group的高度。

.list-group
   {
   height:380px;
 }
.list-group-item {
  height:70px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>People</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">
            Results in death or permanent disability of employees.
          </li>
          <li class="list-group-item">
            Results in partial permanent disability, injuries or illness of 3 employees or more.</li>
          <li class="list-group-item">
            Injury or illness resulting in one or more work days lost.
          </li>
          <li class="list-group-item">
            Minor illness or injury to employees resulting in one day's absence.</li>
          <li class="list-group-item">Minor illness or injury to employees with no absent days.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Environment</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Irreversible environmental damage.</li>
          <li class="list-group-item">Reversible environment damage.</li>
          <li class="list-group-item">Mitigable environment damage where restoration activities can be done.</li>
          <li class="list-group-item">Little environmental damage.</li>
          <li class="list-group-item">Minimal environmental damage.</li>
        </ul>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h2>Financial</h2>
        </div>
        <ul class="list-group">
          <li class="list-group-item">Amount of loss: 1M or more.</li>
          <li class="list-group-item">Amount of loss: 200,000 but less than 1M.></li>
          <li class="list-group-item">Amount of loss: 10,000 but less than 200,000.</li>
          <li class="list-group-item">Amount of loss: 5,000 but les than 10,000.</li>
          <li class="list-group-item">Amount of loss: Less than 5,000.</li>
        </ul>
      </div>
    </div>
  </div>
</div>