複雜的佈局與信息

Question

行我使用的引導 - 我需要佈置這樣的：

它需要響應。

這算作'表格數據'嗎？應該用桌子嗎？我們如何將它保持在所有響應寬度的一行上並對齊？

我已經嘗試使用響應列，但它需要大量的手動調整在每個寬度，只是不看起來優雅。

我錯過了一個明顯的解決方案，或者這本身就很難嗎？

Answer 1

一般而言，獲得響應能力的最簡單方法是在寬度屬性上使用百分比值; 此外，css media-queries應該用於指定某些顯示或寬度 （使用媒體查詢，您可以在特定情況下創建自定義樣式）;

基本上，這正是bootstrap grid（我提到它，因爲我看到這就是你如何標記你的問題）的原則;

如果我是你，我會使用引導程序container和rows，然後爲行內的內容自定義樣式（如果方便，也可以使用引導列）。

Answer 2

在這種情況下，對於響應式佈局，最好使用引導程序list-group而不是表格。每個列表組項目應該包含row和columns所需的大小。

雖然這裏有很多內容可供選擇，但我建議不要在智能手機大小的設備上保留所有內容。在這段代碼中，列是堆疊在xs設備上的。

下面是一個例子bootply：http://www.bootply.com/nVV0PvhNFC

<ul class="list-group"> 
    <li class="list-group-item"> 
     <div class="row"> 
     <div class="col-sm-1"> 
      <p>Image</p> 
     </div> 
     <div class="col-sm-7"> 
      <p>Fund name</p> 
      <p>Sector</p> 
     </div> 
     <div class="col-sm-2"> 
      <p>Favourite</p> 
     </div> 
     <div class="col-sm-2"> 
      <p>Read More</p> 
     </div> 
     </div> 
    </li> 
</ul>