Bootstrap 4手风琴标题向左浮动和向右浮动div使高度相同并垂直对齐答案

【问题标题】：Bootstrap 4 accordion header float left and float right divs make both same hight and align verticallyBootstrap 4手风琴标题向左浮动和向右浮动div使高度相同并垂直对齐
【发布时间】：2023-03-31 14:33:02
【问题描述】：

我创建了一个 Bootstrap 4 手风琴。我在按钮标题中有两个 div。一个浮子左另一个浮子右。右边是图片，左边是标题和副标题。

除了我希望左边的 div 与右边的 div 高度相同并且两个标题垂直对齐之外，所有的工作都很好。

当我使用 css 来尝试完成上述操作时，我会不断破坏手风琴中的其他内容。我已经走到了尽头。我创建了一个小提琴，希望有人能够提供帮助。

我在这里创建了一个小提琴：>> Fiddle

<div class="accordion" id="page-accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    <div class="left">
                        <h5 class="card-title">OCTOBER 2018</h5>
                        <h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
                    </div>
                    <div class="right">
                        <img src="pic.png" width="209px" height="119">
                    </div>
                    <div class="clear"></div>
                </button>
            </h5>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
            <div class="card-body">
                <p class="card-text">DETAILS COMING SOON</p>
                <a href="#" class="btn btn-danger">Click here for details</a>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css bootstrap-4 bootstrap-accordion

【解决方案1】：

Fixed JSFiddle Here

您可以使用display: flex 使容器中的每个项目具有相同的高度。我还必须对您的容器 h5 进行一点小改动。 Display flex 是使用 float 的绝佳替代品（使用起来可能非常棘手）。

    <!doctype html>
<html lang="en">
<head>
    <!-- before all other stylesheets -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>

<body>

<!-- ACCORDION -->
<div class="accordion" id="page-accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" style="width:100%;" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <h5 class="card-title">OCTOBER 2018</h5>
                        <h6 class="card-subtitle mb-2">TODAY IS THE DAY</h6>
                </button>
            </h5>
      <div>
        <img src="pic.png" width="209px" height="119">
      </div>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#page-accordion">
            <div class="card-body">
                <p class="card-text">DETAILS COMING SOON</p>
                <a href="#" class="btn btn-danger">Click here for details</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>

【讨论】：

它在小提琴中的效果很棒，但是当我尝试将更改实现到 wordpress 页面时，它变得一团糟。发现有其他样式干扰。所以在绝望中我添加了你的css内联并且它有效！谢谢！我将不得不做一些关于 flex 的阅读！