当我通过电脑看到我的网站时，一切都非常集中，按照我想要的方式，但是当我打开手机时，所有项目都向左移动，它变得非常丑陋，我不知道发生了什么
.shop-card {
width: 250px;
margin-right: 0px;
margin-top: 10px;
height: 350px;
background: #f5f5f5;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
border-radius: 2px;
padding: 20px;
text-align: center;
display: inline-block;
font-family: "Open Sans Condensed", sans-serif;
}
.shop-card .title {
font-weight: 900;
text-transform: uppercase;
font-size: 25px;
color: #23211f;
margin-bottom: 5px;
}
.shop-card .desc {
font-size: 13px;
opacity: 0.8;
margin-bottom: 3px;
color: #23211f;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="shop">
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@Giveaway">
<strong> @Gi...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="With this role, you can participate on giveaways!"><i style="font-size:20px" class="far fa-file-alt"></i> With this role, you can participate on giveaways!...
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('1','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@Moderators">
<strong> @Mode...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="Be moderator for 1 day"><i style="font-size:20px" class="far fa-file-alt"></i> Be moderator for 1 day...
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('2','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@Administrator">
<strong> @Admi...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="Be ADMIN for 1 day"><i style="font-size:20px" class="far fa-file-alt"></i> Be ADMIN for 1 day...
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('3','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@Premium">
<strong> @Prem...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="BE A VIP"><i style="font-size:20px" class="far fa-file-alt"></i> BE A VIP
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color:#dabe72" class="fas fa-money-bill"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('4','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@Support">
<strong> @Supp...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="SUPPORT US"><i style="font-size:20px" class="far fa-file-alt"></i> SUPPORT US
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('5','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@new role">
<strong> @new ...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="SUPPORT US"><i style="font-size:20px" class="far fa-file-alt"></i> SUPPORT US
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('6','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@DISBOARD.org">
<strong> @DISB...</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="DISBOARD"><i style="font-size:20px" class="far fa-file-alt"></i> DISBOARD
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 1.0k <i style="color:#dabe72" class="fas fa-money-bill"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 0</strong> <strong style="color:"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('7','689937289282846776')">Redeem</button>
</div>
</div>
</div>
<div style="margin-right:15px;" class="shop-card">
<div style="background-color:#7386d5" class="product">
<h1 data-toggle="tooltip" data-placement="top" title="" style="color:white;font-size:30px;padding:20px" data-original-title="@-">
<strong> @-</strong>
</h1>
</div>
<div style="margin-top:10px">
<hr>
<div data-toggle="tooltip" data-placement="top" title="" style="height:50px" class="desc" data-original-title="BUY IT FOR OWNER"><i style="font-size:20px" class="far fa-file-alt"></i> BUY IT FOR OWNER...
</div>
<hr>
<div class="cta">
<div style="text-align:center" class="price">Price: 10.0k <i style="color: #7289da" class="fas fa-gem"></i></div>
<div style="text-align:center;">
<strong style="color:black">Level: 1000</strong> <strong style="color:#da7272"><i class="fas fa-star"></i></strong>
</div>
<br>
<button class="button_div" style="color:white;" onclick="buyrank('8','689937289282846776')">Redeem</button>
</div>
</div>
</div>
</div>
基本上，除了物品，一切都集中在移动设备上。作为参考，只需查看 2 个案例中的“加载更多”按钮，因为它是集中式的