问题描述
我正在使用引导程序4。我正在尝试创建一个定价计划，该计划在移动屏幕尺寸时保持不变。我了解@media，但我认为这是职位问题。我不确定如何解决此问题。
我的目标是拥有这样的东西：https://www.chimpcharge.com/pricing
如果有人可以查看我的代码并让我知道我要去哪里，我将非常感激。
如果有人想看一下，我会将这段代码放在Codepen中：https://codepen.io/rob-connolly/pen/QWNgyNQ
谢谢！
.heroSection {
background-color: #F8FBFC;
}
.heroText {
font-weight: 900;
font-size: 50px;
color: #373E42;
padding-top: 4%;
padding-right: 3%;
padding-left: 3%;
padding-bottom: 2%;
}
.subHeroText {
font-size: 20px;
color: rgb(107,113,117);
padding-left: 10%;
padding-right: 10%;
}
.priceBox {
border-width: thin;
border-color: #E9EEF1;
border-style: solid;
position: relative;
}
.dollarsymbol {
font-size: 20px;
font-weight: 400;
}
.amount {
font-size: 60px;
font-weight: 900;
}
.mo {
padding-top: 3%;
padding-left: 3%;
}
li.borderless {
border: 0 none;
padding-top: 0;
}
.iconFeatures {
padding-left: 20%;
}
.iconTextPrice {
padding-left: 5%;
font-size: 16px;
font-weight: 200;
padding-top: 1%;
position: relative;
}
.setupText {
font-size: 16px;
color: black;
margin-bottom: 0.3em;
padding-top: 1em;
}
#heroButton {
font-size: 20px;
padding-right: 30px;
padding-left: 30px;
}
.cancelAnytime {
font-size: 14px;
color: rgb(107,117);
padding-bottom: 1em;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght@200;400;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<title>Clover Networks and TextJet Loyalty</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light">
<a href="#" class="navbar-brand">
<img src="./assets/images/TextJet.png" height="28" alt="CoolBrand">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link">How it Works</a>
<a href="#" class="nav-item nav-link">FAQ</a>
<a href="#" class="nav-item nav-link">Pricing</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Sign Up</a>
<a href="http://app.staging.textjet.com/app/login" class="nav-item nav-link">Login</a>
</div>
</div>
</nav>
<div class="container-flex">
<div class="row">
<div class="col-12 text-center heroSection heroText">
<h1>Easy Pricing</h1>
<div class="row">
<div class="col-12">
<h2 class='text-center subHeroText'>Our everything plan gives you all the tools you need to run a successful loyalty campiagn.</h2>
</div>
</div>
</div>
<img class="img-fluid heroBottom" src="./assets/images/hero-bottom.png" alt="img for bottom">
</div>
</div>
<div class="container-flex pricePageBox">
<div class="row justify-content-center">
<div class="col-5 text-center priceBox">
<div class="col-12 justify-content-center d-flex justify-content-between;">
<h2 class="dollarsymbol">$</h2>
<h2 class="amount">49</h2>
<h3 class="mo">/mo</h3>
</div>
<div class="row justify-content-center">
</div>
<ul class="list-group ">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">Unlimited Customers
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">LoyaltyPlus Tool
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">RetentionPlus Tool
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">Rich Messaging
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">2-Way Messaging
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures " style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">Clover Integration
</li>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between; borderless"><i class="far fa-smile-beam fa-2x iconFeatures" style="color: #F47820;"></i>
<h5 class="iconTextPrice" style="color: #000;">Top-Rated Support
</li>
</ul>
<div class="row">
<div class="col-12 text-center">
<h3 class="setupText">Get set-up in 15 minutes. </h3>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<button id="heroButton" type="button" class="btn btn-primary">Sign
Up</button>
<div class="row">
<div class="col-12 text-center cancelAnytime">No commitment,Cancel anytime.
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>解决方法
将此元素移动到类别为col-auto的不同align-self-center中。
<h2 class="dollarSymbol">$</h2>
<h2 class="amount">49</h2>
<h3 class="mo">/mo</h3>
用.justify-content-center
类似这样的东西：
[...]
<div class="row justify-content-center">
<div class="col-auto align-self-center">
<h2 class="dollarSymbol">$</h2>
</div>
<div class="col-auto align-self-center">
<h2 class="amount">49</h2>
</div>
<div class="col-auto align-self-center">
<h3 class="mo">/mo</h3>
</div>
</div>
[...]
我认为应该可以解决问题。