Исправлен размер скважины в бутстрапе

Question

У меня есть петля текста, отображаемая на странице, с кнопкой, которая циклирует цикл. Каждый раз, когда я нажимаю кнопку, ядро ​​меняет размеры, так как текст отличается от длины, есть ли способ, которым я могу установить размер скважины, чтобы каждый клик оставался фиксированным, но в то же время все еще реагировал?

 <div class ="col-md-6"> 
      <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>     
     </div> 

function cycle() { 
var randomNumber = Math.floor(Math.random() * (testimonials.length)) 
document.getElementById('quote').innerHTML = textimonals[randomNumber]; 
} 
var testimonials = ["ex.", "ex.", "ex."] 

Answer 1

Вы можете использовать min-height так что будет оставаться на минимальной высоте и быть отзывчивым, а также.

function cycle() { 
 
    var randomNumber = Math.floor(Math.random() * (testimonials.length)) 
 
    document.getElementById('quote').innerHTML = testimonials[randomNumber]; 
 
} 
 

 
var testimonials = ["ex.", "ex.", "ex.", "Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him."];

#quote { 
 
    min-height: 50px; 
 
}

<div class ="col-md-6"> 
 
      <p id="quote">Delighted with my experience. Easy and comfortable. I have the utmost confidence in Scott and trust him to help me find the right vehicle for my self, family members and friends I have referred. I just purchased my 4th car from him. </p><button type="button" class="btn btn-success btn-lg" onclick = "cycle()">&gt</button>     
 
</div>

Answer 2

Несомненно, просто установите разумную высоту, которая будет соответствовать всем рекомендациям.

#quote{ 
    height: 300px; 
}