我想将 Bootstrap 4 Accordion Card 中来自不同 div 的图像彼此对齐

Question

我的 Bootstrap 4 手风琴卡片的每个标题中都有一个箭头图像。我的目标是让它们在卡片的右边缘（但仍在）的边界内彼此对齐。到目前为止我尝试过的所有方法要么将箭头推出卡片，要么使它们低于 header.

的其余部分

我已经尝试了 justify-content、align-content 和 align-items，但其中 none 仍然有效。任何关于如何实现这一目标的提示将不胜感激。下面是它目前的样子。

<div class="card">
      <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite? <img src="images/icon-arrow-down.svg" class="arrow"> 
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
         You can invite up to 2 additional users on the Free plan. There is no limit on 
  team members for the Premium plan.
      </div>
    </div>
  </div>

#accordion{
      
      width:30%;
      float: right;
      position:relative;
      top: 300px;
      right: 900px;
      align-content: center;
      font-family: 'Kumbh Sans', sans-serif;
      
      
  }

  .card-header{
      
      background-color: white;
      clear: both;
    
      
  }
  
  .arrow{
      
      
  }
  
  button{
      position:relative;
      left:-32px;
  
  }

Answer 1

我生成了一个示例以获得与 Bootstrap 4 相同的行为，并将您的箭头 <img> 移动到 <h5> 标记的内部。之后 float:right 属性将元素拉到右边。

.xl {
  width:100%; 
  border: solid 1px #333;
}

#accordion{
  margin-left:30px;
  width:60%;          
}
  
.arrow{
  width:36px;
  height: auto;
  float:right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='xl'>
<h3>Some Header</h3>
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3 
        </button>
        <img src='https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png' class='arrow'>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
</div>

Answer 2

您可以通过将 <h5> 元素变成一个弹性行并利用 justify-content 属性和 space-between.

来做到这一点

例子

HTML:

<div class="card">
    <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite?
        </button>
        v
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.
      </div>
    </div>
</div>

CSS:

#accordion {      
    width:30%;
    float: right;
    position:relative;
    top: 300px;
    right: 900px;
    align-content: center;
    font-family: 'Kumbh Sans', sans-serif;
}

.card-header {
    background-color: white;
    clear: both;
}

.card-header h5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
button{
    position:relative;
    left:-32px;
}

我使用 V 而不是您的图像来可视化效果，但结果是一样的。

片段：

#accordion {      
    width:30%;
    float: right;
    position:relative;
    top: 300px;
    right: 900px;
    align-content: center;
    font-family: 'Kumbh Sans', sans-serif;
}

.card-header {
    background-color: white;
    clear: both;
}

.card-header h5 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
button{
    position:relative;
    left:-32px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
    <h3> FAQ </h3>
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
         How many team members can I invite?
        </button>
        v
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        You can invite up to 2 additional users on the Free plan. There is no limit on 
        team members for the Premium plan.
      </div>
    </div>
</div>

Codepen 示例 here.

我还建议在 Flexbox 上查看 this very simple guide。

我想将 Bootstrap 4 Accordion Card 中来自不同 div 的图像彼此对齐

I want to align images from different divs within in my Bootstrap 4 Accordion Card above each other

css

accordion

vertical-alignment

bootstrap-4