Выравнивание элемента по концу адаптивной карты с вертикальным центрированием (Bootstrap 4) - PullRequest
Новая
       33

Выравнивание элемента по концу адаптивной карты с вертикальным центрированием (Bootstrap 4)

0 голосов
/ 30 апреля 2020

Я пытаюсь выровнять предмет, в данном случае внушительную иконку, по концу карты соответствующего размера (по ширине). Я изо всех сил пытаюсь заставить это работать. Вот мой html для моей карты: 

<div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
        <div class="card-body">
            <h4 class="card-title">Card Title</h4>
            <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </div>
    </a>
</div>

Вот мой кодовый блок: https://codepen.io/Darlton29/pen/mdeMpKp

Как видите, шеврон не остается на конец карты. Любая помощь приветствуется, спасибо.

Вот как я хочу, чтобы это выглядело: enter image description here

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Лучший способ сделать это так:

немного изменить структуру HTML, просто вытащил иконку вне div кузова машины 

<div class="container">
    <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
    <div class="card mt-4 mycard">
        <a href="#" style="text-decoration: none; color: inherit">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            </div>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </a>
    </div>
</div>

CSS

<style>
    i {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0,-50%);
    }
    .card-body {
        padding-right: 50px;
    }
</style>
1 голос
/ 30 апреля 2020

ОБНОВЛЕНИЕ!

Добавьте абсолютное позиционирование, установите верх на 50% и преобразуйте Y в -50%, чтобы учесть высоту иконки 

.mycard {
  flex-direction: row!important;
}


/*this attempted solution does not seem to work*/

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: transformY(-50%);
}
<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas chevron fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>
0 голосов
/ 30 апреля 2020

Вы можете сделать sh до конца, используя margin-left: 100%: 

.mycard {
  flex-direction: row!important;
}

.fa-chevron-right {
  margin-left: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>
...