Question

我遇到了一个棘手的Bootstrap / JavaScript / CSS问题。我希望下图所示的相邻缩略图中的标题占用相同的空间。默认情况下，h3标记的行高均为26px。

对于其文字未包装到第二行的一个标题，我可以手动将其行高设置为52px以达到所需效果。

但是当我调整窗口大小时，事情就会再次出现。

有没有办法计算4个元素的最大高度，然后在文本尚未包裹的元素中适当地设置行高？

Answer 1

Flexbox实际上在你的场景中工作。诀窍是再次将thumnails本身定义为flexboxes。然后，您可以在flex-grow元素上定义h3以始终填充整个剩余空间（而其他元素具有flex-grow=0）。请参阅以下示例代码（使用＆＃34;完整页面＆＃34;轻松调整项目的宽度）：

＆＃13;

main {
  display: flex;
}

section {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
}

h3 {
  flex: 1 0 auto;
}

/*decoration*/
main {padding: 5px;background: #ccc; }section { background: #fff;border-radius: 3px; margin: 5px;padding: 10px;} h3 { margin: 0 0 20px;}

＆＃13;

<main>
  <section>
    <h3> OD Approval </h3>
    <div> In Progress </div>
  </section>
  <section>
    <h3> Supervisor Approval </h3>
    <div> In Progress </div>
  </section>
  <section>
    <h3> HR Approval </h3>
    <div> In Progress </div>
  </section>
  <section>
    <h3> Grades and Receipts (longer text to wrap)</h3>
    <div> In Progress </div>
  </section>
</main>

＆＃13;

此解决方案甚至不需要任何javascript。

Answer 2

Bootstrap 4 flexbox可以正常工作。这是卡片的一个例子..

<div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="card card-block h-100 text-center">
                <div class="h-75 d-flex justify-content-center py-2 bg-info rounded">
                    <h3 class="my-auto">Snippets</h3>
                </div>
                <h1>313</h1>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card card-block h-100 text-center">
                <div class="h-75 d-flex justify-content-center py-2 bg-info rounded">
                    <h3 class="my-auto">Templates and Themes</h3>
                </div>
                <h1>48</h1>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card card-block h-100 text-center">
                <div class="h-75 d-flex justify-content-center py-2 bg-info rounded">
                    <h3 class="my-auto">Example Code</h3>
                </div>
                <h1>982</h1>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="card card-block h-100 text-center">
                <div class="h-75 d-flex justify-content-center py-2 bg-info rounded">
                    <h3 class="my-auto">More Downloads</h3>
                </div>
                <h1>412</h1>
            </div>
        </div>
    </div>

https://www.codeply.com/go/FDEt2gK20L

Answer 3

经过一番摆弄，我找到了一个有效的组合。解决问题的最大关键是设置.panel-body {height: 100%}

HTML：

<Row id="workflow-display-hor">
      <Col sm={3} className="first">
        <Panel>
          <h3 style={{ color: config.OD.textColor }}>
            OD Approval
          </h3>
          <p style={{ color: config.OD.textColor }} className="status-p">
            {config.OD.status}
          </p>
          <p className="verify-circle">
            <MdCheckCircle style={{ verticalAlign: 'text-bottom', color: config.OD.color }} size={25} />
          </p>
        </Panel>
      </Col>
      <Col sm={3}>
        <Panel>
          <h3 style={{ color: config.Super.textColor }}>
            Supervisor Approval
          </h3>
          <p style={{ color: config.Super.textColor }} className="status-p">
            {config.Super.status}
          </p>
          <p className="verify-circle">
            <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.Super.color }} size={25} />
          </p>
        </Panel>
      </Col>
      <Col sm={3}>
        <Panel>
          <h3 style={{ color: config.HR.textColor }}>
            HR Approval
          </h3>
          <p style={{ color: config.HR.textColor }} className="status-p">
            {config.HR.status}
          </p>
          <p className="verify-circle">
            <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.HR.color }} size={25} />
          </p>
        </Panel>
      </Col>
      <Col sm={3} className="last">
        <Panel>
          <h3 style={{ color: config.GR.textColor }}>
            Grades & Receipts
          </h3>
          <p style={{ color: config.GR.textColor }} className="status-p">
            {config.GR.status}
          </p>
          <p className="verify-circle">
            <MdCheckCircle style={{verticalAlign: 'text-bottom', color: config.GR.color }} size={25} />
          </p>
        </Panel>
      </Col>
    </Row>

CSS：

#workflow-display-hor.row {
  display: flex;
  align-items: stretch;
}

#workflow-display-hor .panel {
  height: 95%;
}

#workflow-display-hor .panel > .panel-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#workflow-display-hor .status-p {
  margin-bottom: 20px;
}
#workflow-display-hor .panel h3 {
  flex: 1 0 auto;
}

结果：

根据相邻元素计算线高

3 个答案: