如何在移動設備上正確顯示Bootstrap內容？

Question

只是爲了體驗，我試圖用引導程序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打開網頁，從標題文本將堆棧可怕的（除非有一個簡短的標題）。

謝謝！

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> 

希望這有助於