小屏幕设备上的引导卡对齐问题

Question

I have 3 card decks each with 3 cards,on large screen everything is fine and they all show up quite good .However in small screens the card deck still shows 3 cards in each row with similar behaviour ,where as i have given col-12 col-xs-12 col-md-12 for each card.I have tested the code on google chrome extension for responsive screens and in that i get one card per row on mobile devices ,however when i deploy the website and test it on actual phone i get 3 cards in a row,so users will have to zoom to read the content .

This is my code:

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

What i have tried are: 1)I removed card-deck and used float:left for each card with padding-right:10px; however that is causing an alignment issue in the screen due to the padding

2) I removed card-deck and gave max-width:20rem for each card ,with padding-right and this works fine,in large screen however on small screen there is one card per row but it occupies half the screen and it looks odd.I have tried giving width in percentages for card ,like max-width:80% for each card but that is making it occupy 80% of entire screen instead of 80 % of the div in which it is there .

Answer 1

Your structure is wrong. Cards works different. See the documentation: 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>