Bootstrap4 card-title вызывает переполнение значка - PullRequest
Новая
       53

Bootstrap4 card-title вызывает переполнение значка

1 голос
/ 01 августа 2020

Я пытаюсь создать карту в bootstrap4, которая имеет поведение развертывания / свертывания с красной кнопкой закрытия «X». Я очень близок к тому, чтобы это сделать, но когда я перемещаю свой красный значок закрытия x за пределы элемента, который управляет расширением / свертыванием logi c, он перемещает красную кнопку закрытия в нижнюю строку?

Я попытался изменить 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/

Ответы [ 2 ]

2 голосов
/ 01 августа 2020

Вам не нужно использовать d-block на a - Bootstrap применит свой CSS и настроит элементы responsively и соответственно. Я удалил d-block и все работает нормально.

Демо-версия Working Fiddle: 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>
0 голосов
/ 01 августа 2020

Я добавил свойство CSS3 display:flex в ваш расширяемый div, чтобы сделать его встроенным.

Щелкните ниже, чтобы проверить рабочий пример:

Рабочий пример

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...