小屏幕設備上的引導卡對齊問題

Question

我有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％。

Answer 1

您的結構是錯誤的。 卡的工作原理有所不同。 請參閱文檔： 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>