Проблема с размером в bootstrap карточках - PullRequest
0 голосов
/ 29 января 2020

Проблема: displaying the issue

Мой макет выглядит следующим образом, когда текст состоит из 1 строки, он будет go вверх, и мне нужно исправить в той же позиции. Как мы это делаем?

Ответы [ 2 ]

0 голосов
/ 29 января 2020

Простое решение - создать функцию и найти максимальную высоту текста. Вам также нужно будет создать окно прослушивания изменения размера и вызвать функцию для регулировки высоты.

$(function() {

  let adjustElementHeight = () => {

      // Fix the initial of the resize
      Array.from($(".js__selector")).forEach((x) => {
            x.style.height = 'initial';
      });

      // Store height inside array
      const titleHeights = Array.from($(".js__selector"))
        .map(x => x.getBoundingClientRect().height);

    // Find the bigest
      const maxHeight = titleHeights.reduce((prev, curr) => {
        return curr > prev ? curr : prev;
      }, 0);


    // Adjust the size 
   Array.from($(".js__selector"))
            .forEach((x) => x.style.height = `${maxHeight}px`);
  }
  	// call the function on load
  adjustElementHeight();
  
  // Listen the reize 
    $(window).resize(() => {
  			adjustElementHeight();
  	});

});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container mt-5">
  <div class="row">
    <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title js__selector">Card title Bigest than the right one</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    </div>
     <div class="col">
     <div class="card">
      <div class="card-body">
        <h5 class="card-title js__selector">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    </div>
    </div>
  </div>
  
0 голосов
/ 29 января 2020

Я предполагаю, что у вас есть текст в любом погружении. Допустим, у вас есть вот так

<div class="milageDiv">{{data.milage}}</div>

Итак, в вашем css добавьте это свойство white-space: nowrap;

.milageDiv {
    white-space: nowrap;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...