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

Question

我有这个bootstrap片段：

<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>

它创建了这个表：

桌面上的一切看起来都不错，但是当我在手机或平板电脑上看它时，它会破坏：

是否可以在不破坏的情况下创建它？ （带表格的版本不适合）

Answer 1

尝试在容器上设置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>

Answer 2

此方法适用于窄视口：

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

您只能将其包装到@media以用于x小屏幕。

Answer 3

您可以将打破div s的元素设置为display: flex，默认情况下会将它们显示在一行而不是中断：

＆＃13;

＆＃13;

.flex {
  display: flex;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;