Bootstrap Нижний колонтитул карточки неправильно форматируется до второй строки

Question

Меня раздражает попытка использовать Bootstrap для форматирования нижнего колонтитула карты. Я пытаюсь получить рейтинговые звезды в верхнем ряду нижнего колонтитула и заголовок и цену в нижнем ряду нижнего колонтитула.

<div className="card-footer d-flex  mb-0">

        <div className="row">
          <div className="col">
            <Rating _id={_id} />
          </div>
        </div>

        <div className="row justify-content-between">
          <div className="col">
            <p className="align-self-center mb-0 ">
              {title}
            </p>
            <h5 className="text-blue font-itealic mb-0"><span className="mr-1">$</span>{price}</h5>

          </div>
        </div>
      </div>

Это изображение показывает неправильный результат моего кода.

Следующее изображение показывает, чего я пытаюсь достичь.

Кстати, если это важно, я использую React. Любая помощь, безусловно, будет оценена по достоинству.

Answer 1

позвольте мне посмотреть, могу ли я вам помочь. Попробуйте использовать сетку css в этом нижнем колонтитуле следующим образом:

<div className="card-footer d-flex  mb-0">
  <div className="foot-grid">

    <div className="rating">
        <Rating _id={_id} />
    </div>
    <div className="title">
       <p className="text-center">{title}</p>
    </div>
    <div className="price">
      <h5 className="text-blue font-italic mb-0"><span className="mr-1">$</span>{price}</h5>
    </div>

  </div>
</div>

И ваш css для этого будет следующим:

.foot-grid{ 
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 0 1rem;
}
.foot-grid>.rating{
   grid-column: 1/-1;
}
.foot-grid>.title{ text-align: left; }
.foot-grid>.price{ text-align: right; }

Изменить: что внутри <Rating /> первая оболочка это элемент div? ?

Этого должно быть достаточно, надеюсь, вам это поможет. Если нет, просто скажите мне отредактировать свой ответ.

Answer 2

Возможно, вам это поможет

<div className="card-footer d-flex  mb-0">

    <div className="row">
      <div className="col">
        <Rating _id={_id} />
      </div>
    </div>

    <div className="row justify-content-between">
      <div className="col">
        <p className="align-self-center mb-0 ">
          {title}
          <span className="text-blue font-itealic mb-0"><span className="mr-1">$</span>{price}</span>
        </p>


      </div>
    </div>
  </div>