Bootstrap4 卡片标题导致图标溢出答案

【问题标题】：Bootstrap4 card-title causing icon to overflowBootstrap4 卡片标题导致图标溢出
【发布时间】：2020-08-02 02:53:58
【问题描述】：

我很想在 bootstrap4 中创建一张卡片，该卡片具有展开/折叠行为，带有红色关闭“X”按钮。我非常接近完成它，但是当我将红色 x 关闭图标移到控制展开/折叠逻辑的元素之外时，它会将红色关闭按钮移动到下一行？

我尝试更改 margin-right 和 padding-right 但无法修复它，有人可以帮忙吗？

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
      <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example" class="d-block">
          <i class="rotate fa fa-chevron-down "></i>
          good style 
          <i style='color:red' class="fa fa-close pull-right"></i>
      </a>
      
    </h5>
    <div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            card body
        </div>
    </div>
</div>



<div class="card ml-5 mr-5 mt-5">
    <h5 class="card-header expandable">
      <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example" class="d-block">
          <i class="rotate fa fa-chevron-down "></i>
          uh oh card-title margin looks weird?
          
      </a>
      <i style='color:red' class="fa fa-close pull-right"></i>
      
    </h5>
    <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
        <div class="card-body">
            card body
        </div>
    </div>
</div>

https://jsfiddle.net/martinradio/s0ygr35L/8/

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您无需在a 上使用d-block - Bootstrap 将应用自己的 CSS 并相应地调整元素 responsively。我已经删除了 d-block 并且它工作正常。

工作小提琴演示：https://jsfiddle.net/usdj51ga/

.expandable .fa {
  transition: .3s transform ease-in-out;
}

.expandable .collapsed .rotate.fa {
  transform: rotate(180deg);
}

<head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>


</head>

<div class="card ml-5 mr-5 mt-5">
  <h5 class="card-header expandable">
    <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example1" aria-expanded="true" aria-controls="collapse-example1" id="heading-example">
      <i class="rotate fa fa-chevron-down "></i> good style
      <i style='color:red' class="fa fa-close pull-right"></i>
    </a>

  </h5>
  <div id="collapse-example1" class="collapse show" aria-labelledby="heading-example">
    <div class="card-body">
      card body
    </div>
  </div>
</div>


<div class="card ml-5 mr-5 mt-5">
  <h5 class="card-header expandable">
    <a style='padding-right:-10px' data-toggle="collapse" href="#collapse-example" aria-expanded="true" aria-controls="collapse-example" id="heading-example1">
      <i class="rotate fa fa-chevron-down "></i> Yes! card-title margin looks Good!

    </a>
    <i style='color:red' class="fa fa-close pull-right"></i>

  </h5>
  <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
    <div class="card-body">
      card body
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我在您的可展开 div 上添加了 CSS3 display:flex 属性以使其内联。

点击下方查看工作示例：

Working Example

【讨论】：

不需要为此使用自定义 CSS。 Bootstrap 4 将相应地调整元素。我们需要确保我们使用的是正确的类。