320px宽度设备上的神秘左右填充
320px宽度设备上的神秘左右填充
提问于 2019-04-08 07:02:57
我正在使用bootstrap来创建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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55564433
复制相关文章
相似问题
腾讯云开发者
