css - 如何让Bootstrap在移动设备上正常显示内容？

Question

只是为了体验，我正在尝试使用 bootstrap 3 重新创建 amazon.com。我已经记下了很多，但我似乎无法得到的一件事是移动显示。如何使图像与文本保持一致，但在屏幕变为纵向移动显示时不堆叠文本？我已经设置了视口(viewport)，我已经尝试过响应式图像，但问题似乎在于文本的堆叠方式。我可以禁用它吗？

这是我得到的一个简单示例:

<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 打开页面时，标题中的文本会堆积得很糟糕(除非有一个短标题)。

谢谢!

Answer 1

据我所知，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>

希望对你有帮助