我有3个卡片组，每个卡片组有3张卡片，在大屏幕上一切都很好，而且都显示的很好。但是，在小屏幕上，卡片组仍然在每行中显示3张具有类似行为的卡片，正如我所给出的col-12 col-xs-12 col-md-12每张卡。我已经在google chrome扩展程序上测试了响应屏幕的代码，并在移动设备上每行获得一张卡，但是当我部署网站并进行测试时在实际的电话上，我连续获得3张卡，因此用户将不得不缩放以读取内容。
这是我的代码：
<div id="Places">
<h2 class="text-primary">Tourist places In Salalah</h2>
<br />
<div class="card-deck">
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card1">
<div class="card-header">Salalah Museum</div>
<div class="card-body">
<!--<h4 class="card-title">Info card title</h4>-->
<p class="card-text">This museum houses an eclectic collection, with sections devoted to regional geology and history. There is also a permanent display of Wilfred Thesiger's photographs.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a> </h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card2">
<div class="card-header">Burj an-Nadha</div>
<div class="card-body">
<!--<h4 class="card-title">Light card title</h4>-->
<p class="card-text">The clocktower may not be a sky-scraper but it is indeed the icon of Salalah, featured in the coat of arms of Dhofar Governate. The tower looks stunning during nights due to the colorful light display.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card3">
<div class="card-header">Tomb of Nabi Umran</div>
<div class="card-body">
<!--<h4 class="card-title">Dark card title</h4>-->
<p class="card-text">Umran (Imran) was a local Arab prophet, believed by some to have been the father of the Virgin Mary, and believed by others to have been the father of Moses. The sarcophagus is 33 m long.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="card-deck">
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card4">
<div class="card-header">Al Marnif Cave</div>
<div class="card-body">
<!--<h4 class="card-title">Primary card title</h4>-->
<p class="card-text">Al Marnif Cave lies in Shatti Al Mughsayl area about 40 kilometres from Salalah in Governorate of Dhofar. It overlooks the Arabian Sea and Al Mughsayl fountains (blow-holes).<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card5">
<div class="card-header">Sultan Qaboos Grand Mosque</div>
<div class="card-body">
<p class="card-text">Completed in 2009, this mosque can accommodate 14,000 people. Conservative dress required; women must have their ankles, wrists and hair covered.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card6">
<div class="card-header">Museum of the Land of Frankincense</div>
<div class="card-body">
<p class="card-text">The Museum of the Land of Frankincense is a museum in Salalah, Dhofar Governorate, Oman, based on frankincense, in association with the Al-Baleed Archaeological Park, a UNESCO World Heritage Site.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="card-deck">
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card7">
<div class="card-header">Tawi Ateer Sinkhole</div>
<div class="card-body">
<p class="card-text">Tawi Ateer Sinkhole, known as the ‘Bird Well’ gained international fame after its discovery in 1997 by a team of Slovenian explorers in collaboration with Sultan Qaboos University as one of the largest solvent sinkholes in the world.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card8">
<div class="card-header">Footprint of Prophet Saleh's Camel</div>
<div class="card-body">
<p class="card-text">A shrine housing the footprint of an enormous camel in the bedrock.he camel was said to have appeared from nearby mountains as a miracle, yet was killed three days later by unbelievers who refused to recognize the Prophet Saleh.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
<div class="card text-white bg-primary mb-3 animated col-12 col-xs-12 col-md-12 col-lg-4 col-xl-4" id="card9">
<div class="card-header">Khawr Ad Dahareez</div>
<div class="card-body">
<p class="card-text">Khawr Ad Dahareez is located at the eastern entrance of Salalah city in the Governorate of Dhofar. Its waters intermingle with Salalah basin waters, especially the wells located on the coastal strip. This lagoon is important to biodiversity as it is heavily frequented by migratory birds.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
</div>
我尝试过的是： 1）我删除了卡片组，并为每张卡片使用了float：left，其padding-right：10px; 但是由于填充
，这会导致屏幕对齐问题2）我卸下卡座，为每张卡提供最大宽度：20rem，并向右填充，这很好用，在大屏幕上，但是在小屏幕上，每行只有一张卡，但它占据了屏幕的一半，看起来很奇怪。我尝试以百分比的形式给出卡片的宽度，例如每张卡片的max-width：80％，但这使它占据了整个屏幕的80％，而不是它所在的div的80％。 >
答案 0 :(得分：3)
您的结构错误。卡的工作原理有所不同。请参阅文档：https://getbootstrap.com/docs/4.1/components/card/#sizing
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<div id="Places">
<h2 class="text-primary">Tourist places In Salalah</h2>
<div class="row">
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card1">
<div class="card-header">Salalah Museum</div>
<div class="card-body">
<!--<h4 class="card-title">Info card title</h4>-->
<p class="card-text">This museum houses an eclectic collection, with sections devoted to regional geology and history. There is also a permanent display of Wilfred Thesiger's photographs.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a> </h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card2">
<div class="card-header">Burj an-Nadha</div>
<div class="card-body">
<!--<h4 class="card-title">Light card title</h4>-->
<p class="card-text">The clocktower may not be a sky-scraper but it is indeed the icon of Salalah, featured in the coat of arms of Dhofar Governate. The tower looks stunning during nights due to the colorful light display.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card3">
<div class="card-header">Tomb of Nabi Umran</div>
<div class="card-body">
<!--<h4 class="card-title">Dark card title</h4>-->
<p class="card-text">Umran (Imran) was a local Arab prophet, believed by some to have been the father of the Virgin Mary, and believed by others to have been the father of Moses. The sarcophagus is 33 m long.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card4">
<div class="card-header">Al Marnif Cave</div>
<div class="card-body">
<!--<h4 class="card-title">Primary card title</h4>-->
<p class="card-text">Al Marnif Cave lies in Shatti Al Mughsayl area about 40 kilometres from Salalah in Governorate of Dhofar. It overlooks the Arabian Sea and Al Mughsayl fountains (blow-holes).<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card5">
<div class="card-header">Sultan Qaboos Grand Mosque</div>
<div class="card-body">
<p class="card-text">Completed in 2009, this mosque can accommodate 14,000 people. Conservative dress required; women must have their ankles, wrists and hair covered.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card6">
<div class="card-header">Museum of the Land of Frankincense</div>
<div class="card-body">
<p class="card-text">The Museum of the Land of Frankincense is a museum in Salalah, Dhofar Governorate, Oman, based on frankincense, in association with the Al-Baleed Archaeological Park, a UNESCO World Heritage Site.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card7">
<div class="card-header">Tawi Ateer Sinkhole</div>
<div class="card-body">
<p class="card-text">Tawi Ateer Sinkhole, known as the ‘Bird Well’ gained international fame after its discovery in 1997 by a team of Slovenian explorers in collaboration with Sultan Qaboos University as one of the largest solvent sinkholes in the world.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a> </p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card8">
<div class="card-header">Footprint of Prophet Saleh's Camel</div>
<div class="card-body">
<p class="card-text">A shrine housing the footprint of an enormous camel in the bedrock.he camel was said to have appeared from nearby mountains as a miracle, yet was killed three days later by unbelievers who refused to recognize the Prophet Saleh.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<br />
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-lg-4 col-xl-4">
<div class="card text-white bg-primary mb-3 animated" id="card9">
<div class="card-header">Khawr Ad Dahareez</div>
<div class="card-body">
<p class="card-text">Khawr Ad Dahareez is located at the eastern entrance of Salalah city in the Governorate of Dhofar. Its waters intermingle with Salalah basin waters, especially the wells located on the coastal strip. This lagoon is important to biodiversity as it is heavily frequented by migratory birds.<a href="https://en.wikipedia.org/wiki/Salalah" target="_blank" style="color: white;">Wikipedia</a></p>
<h6 class="card-title">Book a Tour:<a href="tel:0096899143222" style="color: white;">00968 -99143222</a></h6>
</div>
</div>
</div>
</div>
</div>