gpt4 book ai didi

html - 如何在不破坏行的情况下创建表格? ( Bootstrap )

转载 作者:行者123 更新时间:2023-11-28 04:36:47 26 4
gpt4 key购买 nike

我有这个 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>

它创建了这个表:

enter image description here

在桌面上一切看起来都很好,但是当我在手机或平板电脑上观看时它就坏了:

enter image description here

是否可以在不破坏的情况下创建它? (带表格的版本不适合)

最佳答案

尝试像这样在容器上设置一个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>

关于html - 如何在不破坏行的情况下创建表格? ( Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41433085/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com