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

【问题标题】：How can I make Bootstrap display content properly on mobile devices?如何让 Bootstrap 在移动设备上正确显示内容？
【发布时间】：2016-02-06 04:05:05
【问题描述】：

只是为了体验，我正在尝试使用 bootstrap 3 重新创建 amazon.com。我已经完成了很多，但我似乎无法获得的一件事是移动显示。当屏幕转到纵向移动显示器时，如何使图像与文本内联，但不堆叠文本？我已经设置了视口，我尝试过响应式图像，但问题似乎是文本如何堆叠。我可以禁用它吗？

这是我所拥有的一个简单示例：

<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 打开页面时，标题中的文字会很糟糕（除非有短标题）。

谢谢！

【问题讨论】：

“堆叠”是指文本换行到下一行吗？你想要发生什么？（我假设你不想要水平滚动）
是的，文本换行到下一行。我想让文字按比例缩小，但仍然清晰易读。
font-size in @media queries not applying的可能重复
不是同一个问题，但答案应该适合你。

标签： css twitter-bootstrap

【解决方案1】：

据我所知，引导程序的整个想法是调整屏幕宽度并在需要时堆叠内容。假设您有 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>

希望对你有帮助

【讨论】：