Блог

Несмотря на то, что он все еще альфа, я решил использовать bootstrap для веб-сайта, над которым я сейчас работаю. В качестве важного элемента моего сайта я хочу создать «визитки» для отображения основной информации пользователя на основе нового класса карточек bootstrap. К сожалению, я не могу заставить эти карты выглядеть именно так, как я хочу.

Вот как я хочу, чтобы они выглядели: макет

И вот как это выглядит до сих пор: попытка

Это мой код:

 <div class="card user-card" onclick="site.load_content('user_profile', 'cteoa3n');">
   <div class="card-block">
      <div class="user-card-image d-inline-block"><img src="/media/profile_pictures/cteoa3n/1472677543.jpg" class="img-circle"></div>
      <div class="user-card-content text-nowrap d-inline-block">
         <h5 class="card-title">Chris Lnrd</h5>
         <div class="card-text">Free User</div>
         <div class="card-text dental-text font-weight-bold">Dental Medicine</div>
         <div class="card-text">Generation 2016 - Group 11</div>
      </div>
   </div>
</div>  

И scss для этого:

 $user-card-width: 300px;
$user-card-height: 130px;

.user-card{
  height: $user-card-height;
  width: $user-card-width;
  max-width: $user-card-width;
  overflow: hidden;
  .card-block{
    height: 100%;
  }
  .user-card-image{
    height: 100%;
    padding-right: 15px;
    display: table-cell;
    vertical-align: middle;
  }
  .user-card-content{    
    height: 100%;
    display: table-cell;
    vertical-align: middle;
  }
  :hover{
    background-color: $gray-lightest;
    cursor: pointer;
  }
}  

Как вы можете видеть, я не могу расположить изображение профиля по центру по вертикали. И если мне удастся, содержимое карты не будет центрировано.
Кроме того, мне интересно, каким хорошим решением было бы поместить имя пользователя внутри карты, даже если оно длинное, потому что, как только его длина превышает фиксированную ширину карты, он портит весь макет.

Надеюсь, у кого-нибудь есть идея, как это решить. Заранее спасибо!

Проблема решена, вы должны использовать стиль таблицы div

 .card.user-card {
      display: table;
}
.card-block {
      display: table-row;
}
.user-card-image {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
    border: 1px solid #e6e6e6;
}
.user-card-content {
      display: table-cell;
    vertical-align: middle;
    padding: 20px;
    border: 1px solid #e6e6e6;
}
  

Пожалуйста, проверьте эту ссылку https://jsfiddle.net/xq7hwvdg /

Ответ Али заставил меня больше экспериментировать, и я, наконец, справился, но создание card-block не было решением, поскольку это приводит к проблемам, когда дело доходит до заполнения всей ширины карты. возможно, это сработало бы, если бы я установил значения ширины% для ячеек таблицы.

проблема, похоже, заключалась в предустановленном заполнении .card-block, мне пришлось перезаписать верхние и нижние отступы. затем таблица и ячейки таблицы вели себя так, как ожидалось (без использования строки таблицы).

 $user-card-width: 300px;
$user-card-height: 130px;

.user-card{
  height: $user-card-height;
  width: $user-card-width;
  max-width: $user-card-width;
  overflow: hidden;
  .card-block{
    padding: 0rem 1.25rem;
  }
  .user-card-image{
    padding-right: 15px;
    display: table-cell;
    vertical-align: middle;
    height: $user-card-height;
  }
  .user-card-content{    
    display: table-cell;
    vertical-align: middle;
    height: $user-card-height;
  }
  :hover{
    background-color: $gray-lightest;
    cursor: pointer;
  }
}