Question

仅仅为了体验，我试图用bootstrap 3重新创建amazon.com。我已经把很多东西都搞砸了，但有一件事我似乎无法做到get是移动显示器。如何保持图像与文本内联，但在屏幕进入纵向移动显示屏时不能叠加文本？我已经设置了视口集，我已经尝试了响应式图像，但问题似乎是文本堆栈的方式。我可以禁用它吗？

这是我所得到的一个简单例子：

<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 =＆＃34; col-md-3＆＃34;），2个宽屏移动屏幕（12/2 =＆＃34; col-xs -6＆＃34;） - 为了清晰起见，我添加了背景色：

   <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显示内容？

1 个答案: