我已将 Bootstrap 4 包含到我的项目中，但也使用了我自己的自定义 css。我有一个价格表，在屏幕中间显示三个价格选项。我正在使用浮动和清除。我希望这些列在 962px 处折叠。在达到 500 像素左右之前，它不会崩溃到 100%。看起来它正在使用自己的断点。所以我的问题是是否有人处理过类似的事情。先感谢您。图片和代码如下。
index.html（是的，我已经包含了视口等的元标记）
<div class="wrapper-red store-backdrop">
<div class="container-fluid mb-5">
<h2 class="pt-5 nuestros-clientes text-center">ELIJE EL MEJOR PLAN</h2>
<div class="text-center">
<i class="fa fa-2x fa-star text-white" aria-hidden="true"></i>
</div>
<div class="container p-4">
<p class="pt-3 light text-white">Tenemos planes que se ajustan a tus necesidades. ¡Prueba uno y si te
agrada, puedes escalar a los demás!
</p>
</div>
<div class="container">
<div class="row">
<div class="column2">
<div class="bg-white shadow rounded p-3 mt-4 text-center">
<h4 class="pt-1">Clase Grupal</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$50</span>
</h1>
<p>Mensuales</p>
<hr>
<p>2 clases de 1 hora por semana</p>
<p>6 Alumnos Máximo por Clase</p>
<p>Maestro Nativo
</p>
<p>Clases Conversacionales
</p>
<p>Inicio de clases cada 1er día hábil del mes</p>
<p>Sujeto a disponibilidad</p>
<p>Horario fijo</p>
<div class="button-holder mb-4">
<button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
style="font-size: 20px;">¡Inscríbete hoy!</span></button>
</div>
</div>
</div>
<div class="column2 middle">
<div class="text-center bg-white shadow rounded p-3" style="height: 830px;">
<h4 class="pt-1">Clase Individual</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$130</span>
</h1>
<p>Mensuales</p>
<hr>
<p>2 clases de 1 hora por semana</p>
<p>Clases Uno a Uno (Particulares) </p>
<p>Maestro Nativo</p>
<p>Clases con Método y Nivel</p>
<p>Horario Fijo</p>
<p class="mb-5 pb-5">Inicio de clases cada 15 días</p>
<div class="button-holder mt-5 mb-5">
<button type="button" class="btn btn-lg bg-grey btn-danger mt-5 p-3"><span
style="font-size: 20px;">¡Inicia tus clases ya!</span>
</button>
</div>
</div>
</div>
<div class="column2">
<div class="text-center bg-white shadow rounded p-3 mt-4">
<h4 class="pt-1">Clase Premier</h4>
<h1><span style="font-size: 80px;font-family:'Lato', sans-serif;">$300</span>
</h1>
<p>Mensuales</p>
<hr>
<p>3 clases de 1 hora por semana
</p>
<p>Clases Uno a Uno (Particulares) </p>
<p>Maestro Nativo</p>
<p>Clases Conversacionales o por Nivel
</p>
<p>Inicio de clases inmediato</p>
<p>Horario flexible</p><br><br>
<div class="button-holder mb-4">
<button type="button" class="btn .btn-lg bg-grey btn-outline-secondary mt-5 p-3"><span
style="font-size: 20px;">¡Avanza hoy!</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
样式.css
.store-backdrop {
background-image: url(../assets/img/backdropFull.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 5px 5px 5px 5px;
width: 100%;
}
.column2 {
float: left;
width: 33.33%;
}
.row2:after {
content: "";
display: table;
clear: both;
}
.middle {
z-index: 1;
}
@media screen and (max-width: 962px) {
.column2 {
width: 100%;
float: none;
}
}
本质上，我希望将 3 列布局更改为以 962 像素堆叠的单个项目。再次感谢您对此的帮助。干杯。