文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >320px宽度设备上的神秘左右填充

问320px宽度设备上的神秘左右填充
EN

Stack Overflow用户
提问于 2019-04-08 07:02:57
回答 1查看 171关注 0票数 0

我正在使用bootstrap来创建col网格，在桌面和表格中它工作得很好，但是在xs-size (特别是在320px设备宽度上，像iPhone 5)它在右边显示一个space，我不知道为什么。你可以看到现场直播的here。你也可以在这里看到快照，看看右边的空间：

​

​

我怎么才能修复它？我试着调整字体文本的大小，但不起作用。

代码语言：javascript
复制
  <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>
html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-04-08 07:56:59

问题是翻转卡片的字体大小。卡片背面的文本太长，即使你看不到内容，也会导致你水平滚动。此外，卡片的“正面”在不方便的地方换行文字，因为屏幕不够宽，无法以这种字体显示一个完整的单词。我会在针对这些小屏幕的媒体查询中添加以下CSS (不太确定何时应该减小尺寸)。

代码语言：javascript
复制
// 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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55564433

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档