Bootstrap 4 accordion header 向左浮动和向右浮动 div 使两者高度相同并垂直对齐
Bootstrap 4 accordion header float left and float right divs make both same hight and align vertically
我创建了一个 Bootstrap 4 手风琴。我在按钮 header 中有两个 div。一个漂浮在左边,另一个漂浮在右边。右边的是图片,左边的是标题和副标题。
除了我希望左侧的 div 与右侧的 div 高度相同并且还让 2 个标题垂直对齐外,一切都很好。
当我和 css 混在一起试图完成上述任务时,我不断地破坏手风琴中的其他东西。我已经筋疲力尽了。我创建了一个 fiddle 并希望有人能够提供帮助。
我在这里创建了一个 fiddle:>> 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>
您可以使用 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>
我创建了一个 Bootstrap 4 手风琴。我在按钮 header 中有两个 div。一个漂浮在左边,另一个漂浮在右边。右边的是图片,左边的是标题和副标题。
除了我希望左侧的 div 与右侧的 div 高度相同并且还让 2 个标题垂直对齐外,一切都很好。
当我和 css 混在一起试图完成上述任务时,我不断地破坏手风琴中的其他东西。我已经筋疲力尽了。我创建了一个 fiddle 并希望有人能够提供帮助。
我在这里创建了一个 fiddle:>> 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>
您可以使用 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>