如何在不打破行的情况下创建表？（引导）

我有这样的引导片段：如何在不打破行的情况下创建表？（引导）

<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

如何在不打破行的情况下创建表？ （引导）

回答

相关问题

如何在不打破行的情况下创建表？（引导）