如何在不打破行的情況下創建表？（引導）

我有這樣的引導片段：如何在不打破行的情況下創建表？（引導）

<div class="col-xs-12"> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <div class="col-xs-12">Project Name</div> 
     </div> 
     <div class="col-xs-9"> 
      <div class="col-xs-1">Jan</div> 
      <div class="col-xs-1">Feb</div> 
      <div class="col-xs-1">Mar</div> 
      <div class="col-xs-1">Apr</div> 
      <div class="col-xs-1">May</div> 
      <div class="col-xs-1">Jun</div> 
      <div class="col-xs-1">Jul</div> 
      <div class="col-xs-1">Aug</div> 
      <div class="col-xs-1">Sep</div> 
      <div class="col-xs-1">Okt</div> 
      <div class="col-xs-1">Nov</div> 
      <div class="col-xs-1">Dec</div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-3"> 
      <div class="col-xs-12">Project #1</div> 
     </div> 
     <div class="col-xs-9"> 
      <div class="col-xs-1">10</div> 
      <div class="col-xs-1">20</div> 
      <div class="col-xs-1">30</div> 
      <div class="col-xs-1">40</div> 
      <div class="col-xs-1">50</div> 
      <div class="col-xs-1">60</div> 
      <div class="col-xs-1">70</div> 
      <div class="col-xs-1">80</div> 
      <div class="col-xs-1">90</div> 
      <div class="col-xs-1">100</div> 
      <div class="col-xs-1">110</div> 
      <div class="col-xs-1">120</div> 
     </div> 
    </div> 
</div>

它創建該表：

一切看起來都在桌面上不錯，但是當我看着它在移動設備或平板電腦它打破：

是否有可能去創造沒有打破？（版本表不適合）

來源

2017-01-02 Max Gabderakhmanov

如果不出意外，你可以把它的滾動。 – ChiefTwoPencils

快速修復：使您的文字變得更小以適應移動設備，長時間修復：您需要針對移動設備的不同佈局。 – aahhaa

@ChiefTwoPencils是的，我認爲是。在我的情況下，我該如何做到這一點？ –

嘗試在容器上設置min-width這樣的：

.container { 
 
    min-width: 630px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12 container"> 
 
    <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <div class="col-xs-12">Project Name</div> 
 
     </div> 
 
     <div class="col-xs-9"> 
 
      <div class="col-xs-1">Jan</div> 
 
      <div class="col-xs-1">Feb</div> 
 
      <div class="col-xs-1">Mar</div> 
 
      <div class="col-xs-1">Apr</div> 
 
      <div class="col-xs-1">May</div> 
 
      <div class="col-xs-1">Jun</div> 
 
      <div class="col-xs-1">Jul</div> 
 
      <div class="col-xs-1">Aug</div> 
 
      <div class="col-xs-1">Sep</div> 
 
      <div class="col-xs-1">Okt</div> 
 
      <div class="col-xs-1">Nov</div> 
 
      <div class="col-xs-1">Dec</div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-3"> 
 
      <div class="col-xs-12">Project #1</div> 
 
     </div> 
 
     <div class="col-xs-9"> 
 
      <div class="col-xs-1">10</div> 
 
      <div class="col-xs-1">20</div> 
 
      <div class="col-xs-1">30</div> 
 
      <div class="col-xs-1">40</div> 
 
      <div class="col-xs-1">50</div> 
 
      <div class="col-xs-1">60</div> 
 
      <div class="col-xs-1">70</div> 
 
      <div class="col-xs-1">80</div> 
 
      <div class="col-xs-1">90</div> 
 
      <div class="col-xs-1">100</div> 
 
      <div class="col-xs-1">110</div> 
 
      <div class="col-xs-1">120</div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-01-02 21:00:44

@ K.Daniek：你是什麼意思？ –

我無法更改.'container'，因爲它涉及很多重要元素 –

它說最簡單的解決方案是最好的，但在這種情況下不是。我們得到了21世紀和一種稱爲RWD的方法。 –

這種方法可以爲窄視工作：

[class^="col-"] { 
    font-size: 2.5vw; 
    padding: 0; 
}

您只能將其包裝到@media中，僅限X小屏幕。

來源

2017-01-02 21:19:46 Banzay

您可以設置元素包裹破div s到display: flex，這將在默認情況下在一排顯示他們，而不是打破：

.flex { 
 
    display: flex; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12 container"> 
 
    <div class="row"> 
 
     <div class="col-xs-3 flex"> 
 
      <div class="col-xs-12">Project Name</div> 
 
     </div> 
 
     <div class="col-xs-9 flex"> 
 
      <div class="col-xs-1">Jan</div> 
 
      <div class="col-xs-1">Feb</div> 
 
      <div class="col-xs-1">Mar</div> 
 
      <div class="col-xs-1">Apr</div> 
 
      <div class="col-xs-1">May</div> 
 
      <div class="col-xs-1">Jun</div> 
 
      <div class="col-xs-1">Jul</div> 
 
      <div class="col-xs-1">Aug</div> 
 
      <div class="col-xs-1">Sep</div> 
 
      <div class="col-xs-1">Okt</div> 
 
      <div class="col-xs-1">Nov</div> 
 
      <div class="col-xs-1">Dec</div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-3 flex"> 
 
      <div class="col-xs-12">Project #1</div> 
 
     </div> 
 
     <div class="col-xs-9 flex"> 
 
      <div class="col-xs-1">10</div> 
 
      <div class="col-xs-1">20</div> 
 
      <div class="col-xs-1">30</div> 
 
      <div class="col-xs-1">40</div> 
 
      <div class="col-xs-1">50</div> 
 
      <div class="col-xs-1">60</div> 
 
      <div class="col-xs-1">70</div> 
 
      <div class="col-xs-1">80</div> 
 
      <div class="col-xs-1">90</div> 
 
      <div class="col-xs-1">100</div> 
 
      <div class="col-xs-1">110</div> 
 
      <div class="col-xs-1">120</div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-01-02 21:45:53

如何在不打破行的情況下創建表？ （引導）

回答

相關問題

如何在不打破行的情況下創建表？（引導）