问题是，当我们调整卡片的大小时，它们要么打乱了填充，要么打断了无限滚动，或者两者都有。
有关更多详细信息，请参见此reddit帖子：https://www.reddit.com/r/bootstrap/comments/bxokxh/modifying_the_owl_carousel/
我们尝试调整源填充的大小（像素数）并使用CSS修改HTML对象。在这两种情况下，填充和/或无限滚动都被破坏。
<section id="section-8">
<h2 class="section-title">Find a Ranking <a data-scroll href="#section-7" class="anchor" data-toggle="tooltip" data-placement="top" title="Copy URL"></a></h2>
<p>Enter a hand and we will return its ranking.</p>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header no-border bg-white pb-0">
<div class="card-body">
<div class="row" id="append">
</div>
<br>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='WTF' id='1' onClick="print_id(1)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_clubs.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='5' onClick="print_id(5)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_clubs.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='9' onClick="print_id(9)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='13' onClick="print_id(13)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='17' onClick="print_id(17)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_clubs.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='21' onClick="print_id(21)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_clubs.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='25' onClick="print_id(25)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_clubs.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='29' onClick="print_id(29)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='33' onClick="print_id(33)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='37' onClick="print_id(37)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_clubs.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='41' onClick="print_id(41)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_clubs.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='45' onClick="print_id(45)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_clubs.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='49' onClick="print_id(49)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_clubs.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='WTF' id='2' onClick="print_id(2)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_diamonds.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='6' onClick="print_id(6)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_diamonds.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='10' onClick="print_id(10)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='14' onClick="print_id(14)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='18' onClick="print_id(18)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='22' onClick="print_id(22)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_diamonds.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='26' onClick="print_id(26)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_diamonds.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='30' onClick="print_id(30)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='34' onClick="print_id(34)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='38' onClick="print_id(38)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='42' onClick="print_id(42)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_diamonds.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='46' onClick="print_id(46)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_diamonds.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='50' onClick="print_id(50)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_diamonds.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='card-btn-x' id='3' onClick="print_id(3)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_hearts.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='7' onClick="print_id(7)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_hearts.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='11' onClick="print_id(11)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='15' onClick="print_id(15)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='19' onClick="print_id(19)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_hearts.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='23' onClick="print_id(23)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_hearts.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='27' onClick="print_id(27)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_hearts.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='31' onClick="print_id(31)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='35' onClick="print_id(35)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='39' onClick="print_id(39)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_hearts.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='43' onClick="print_id(43)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_hearts.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='47' onClick="print_id(47)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_hearts.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='51' onClick="print_id(51)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_hearts.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
<div class="row">
<div class="owl-carousel owl-carousel-showcase owl-carousel-fluid" data-items="[3,2,1]" data-center="true" data-margin="30" data-nav="true" data-loop="true">
<btn class='card-btn-x' id='4' onClick="print_id(4)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/2_of_spades.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='8' onClick="print_id(8)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/3_of_spades.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='12' onClick="print_id(12)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/4_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='16' onClick="print_id(16)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/5_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='20' onClick="print_id(20)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/6_of_spades.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='24' onClick="print_id(24)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/7_of_spades.png" alt="Documentation Layout 1">
</div>
</btn>
<btn class='card-btn-x' id='28' onClick="print_id(28)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/8_of_spades.png" alt="Documentation Layout 2">
</div>
</btn>
<btn class='card-btn-x' id='32' onClick="print_id(32)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/9_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='36' onClick="print_id(36)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/10_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn-x' id='40' onClick="print_id(40)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/jack_of_spades.png" alt="Helpcenter">
</div>
</btn>
<btn class='card-btn-x' id='44' onClick="print_id(44)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/queen_of_spades.png" alt="Changelog">
</div>
</btn>
<btn class='card-btn-x' id='48' onClick="print_id(48)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/king_of_spades.png" alt="Documentation Layout 4">
</div>
</btn>
<btn class='card-btn' id='52' onClick="print_id(52)">
<div class="card card-showcase lift">
<img class="card-img-top" src="assets/imgs/cards/ace_of_spades.png" alt="Helpcenter">
</div>
</btn>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
我们希望这些卡在垂直方向上占用较少的空间（可能是其当前大小的25-33％），并在移动设备上正常工作。
当前，我们可以缩小卡片，但是遇到以下情况：填充错误，猫头鹰阶段过大以及无限滚动中断。