如何在移动设备上正确显示Bootstrap内容？

问题描述：

只是为了体验，我试图用引导程序3重新创建amazon.com。我已经获得了很多，但我似乎无法得到的是移动显示。如何让图片与文字保持一致，但在屏幕移动到人像移动显示时不能叠加文字？我有视口集，我已经尝试了响应式图像，但问题似乎是文本堆栈。我可以禁用吗？如何在移动设备上正确显示Bootstrap内容？

继承人的我有什么简单的例子：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
<a href="#"><img src="image.jpg"></a> 
    </div> 
    <div class="col-xs-8"> 
     <ul class="list-unstyled"> 
      <li><h4>Product Title</h4></li> 
      <li>Price</li> 
      <li>*Review Stars*</li> 
     </ul> 
    </div> 
</div> 
</div>

当我从我的iPhone 6打开网页，从标题文本将堆栈可怕的（除非有一个简短的标题）。

谢谢！

通过“堆积”你的意思是文本换行到下一行？你想要发生什么？（我假设你不想水平滚动） – BSMP

是的，文本换行到下一行。我希望文字缩小但仍清晰可读。 – Hunterisabeast

[@media查询中的字体大小可能不重复]（http://*.com/questions/30496064/font-size-in-media-queries-not-applying） – BSMP

答

据我所知，bootstrap的整个想法是调整到屏幕宽度并在需要时堆叠内容。假设你有12种产品，并且你想在电脑屏幕上显示4个宽屏（12/4 =“col-md-3”），并且在手机屏幕上显示2个宽屏（12/2 =“col-xs-6”） - 为清楚起见，背景色：

<div class="container"> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div> 
<div class="col-xs-6 col-md-3" style="background-color:#e9eaed"> 
    <a href="#"><img class="img-responsive" src="image.jpg"></a> 
    <ul class="list-unstyled"> 
     <li><h4>Product Title</h4></li> 
     <li>Price</li> 
     <li>*Review Stars*</li> 
    </ul> 
</div>

希望这有助于

如何在移动设备上正确显示Bootstrap内容？

相关推荐