在320px宽度的设备上左右填充
我正在使用引导程序来构建col网格。在台式机和台式机上，它的工作效果很好，但是在xs-size（特别是在320px设备宽度上，如iPhone 5）上，它在右侧显示了space，而我没有不知道为什么。您可以看到实时here。您也可以在这里看到快照，查看右侧的空间：
我该如何解决？我尝试调整字体文本的大小，但是没有用。
<div class="container content-parent">
<div class="col-lg-12 mx-auto">
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Casa-04.png" />
<h2>ABIERTO 24/7</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Con seguridad las 24 horas y equipo humano a tu disposición.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Wifi-04.png" />
<h2>FREE WI-FI</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Conectividad permanente en todas las instalaciones.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Silla%20ruedas-03.png" />
<h2>ACCESIBILIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Disponemos de zonas adaptadas y trabajamos en próximas mejoras.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mt-3 mb-2 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono-Piscina.png" />
<h2>PISCINA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Para disfrutar con los amigos o simplemente para relajarse o hacer deporte.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Libro-04.png" />
<h2>BIBLIOTECA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona de estudio amplia y silenciosa donde estudiar, trabajar o hacer consultas.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comedor-04.png" />
<h2>COMEDOR</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Gran zona común para disfrutar del desayuno, comida o cena.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALON-DE-ACTOS-03.png" />
<h2>SALÓN DE ACTOS</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estancia destinada a eventos culturales y formativos, dónde puedes ser el protagonista.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/SALA-MULTIMEDIA-03.png" />
<h2>SALA MULTIMEDIA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Espacio que permite jugar con la videoconsola, juegos de mesa, usar el karaoke o ver la TV.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
<div class="fila-animada">
<div class="row icons-info">
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Gym-04.png" />
<h2>GIMNASIO</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Recinto con todas las manquinarias e instalaciones necesarias para la actividad física.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/LAVANDERIA-03.png" />
<h2>LAVANDERÍA</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zona completamente reformada para el lavado y secado de la ropa.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/chill.png" />
<h2>CHILL OUT</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Zonas ajardinadas y de chill out para encontrar la relajación y diversión que llevas dentro.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-3 mb-lg-2 mr-lg-0 mr-md-0">
<div class="container mb-3 pb-5 pt-5">
<!-- Card Flip -->
<div class="card-flip">
<div class="flip">
<div class="front">
<!-- front content -->
<div class="card">
<div class="card-block">
<img src="img/Icono%20Comunidad-04.png" />
<h2>COMUNIDAD</h2>
</div>
</div>
</div>
<div class="back">
<!-- back content -->
<div class="card">
<div class="card-block">
<p>Estilo de vida basados en los valores del #WeAreRucab.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Card Flip -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2 个答案:
答案 0 :(得分：1)
问题是卡片翻转的字体大小。卡的“背面”上的文字太长，即使您看不到内容，它也会导致您水平滚动。此外，卡的“前”侧在尴尬的地方包裹了文字，因为屏幕的宽度不足以显示该字体大小的完整单词。我会在针对这些较小屏幕的媒体查询中添加以下CSS（不太确定何时减小尺寸）。
// Prevent the card back from creating a scroll bar
.card-flip .back .card-block p {
font-size: 13px;
}
// Lower the font size because the text wraps in a single word
#rucab .card-flip .front .card-block h2 {
font-size: 20px;
}
要调试这样的事情，我在浏览器中打开检查器，然后开始按div上的Delete键，直到问题解决为止。然后，一旦找到“解决”问题的容器，我便开始查看该容器的内容以找出问题所在。我对问题div中的孩子重复此过程，直到找到问题为止。
更新： 我不再遇到这个问题，但是我发现您现在已经将翻转卡片部分更改为仅1张卡片宽而不是2张。看起来不错！这也解决了单词对于容器来说太宽的问题，因为容器现在的宽度是原来的两倍。
答案 1 :(得分：0)
隐藏溢出可能会解决您的问题
top
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？