引导卡中的大小问题

Question

问题：

我的布局如下，当文本带有 1 行时，它会上升，我需要固定在同一位置。我们该怎么做？

Answer 1

一个简单的解决方案是创建一个函数并找到文本的最大高度。您还需要创建一个窗口调整大小侦听器并调用该函数来调整高度。

$(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>
  

Answer 2

我假设您在任何潜水中都有您的文字。所以假设你有这样的

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

所以在你的css 添加这个属性white-space: nowrap;

.milageDiv {
    white-space: nowrap;
}