我的代码目前是
<div class="row">
<div class="col-sm-4">
<h1> label 1 </h1>
</div>
<div class="col-sm-4">
<h1> label 2 </h1>
</div>
<div class="col-sm-4">
<h1> label 3 </h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<article> content </article>
<article> ... </article>
</div>
<div class="col-sm-4">
<article> content </article>
<article> ... </article>
</div>
<div class="col-sm-4">
<article> content </article>
<article> ... </article>
</div>
</div>
基本上,我有三列带有标签的标签,这些标签可以按日期自动分类和显示我的文章,但是在一个小屏幕上,所有列都堆叠在一起,从而破坏了排序。
有没有一种方法可以将三列合并为一列,从而按日期而不是单独地将所有三个类别排序?
最佳答案
最好将所有内容都放在一列,即标签,内容和...
col-sm-4类使您的代码保持活动状态,直到最小宽度为540px。
用这个
<div class="col-sm-4">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
<div class="col-sm-4">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
<div class="col-sm-4">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
虽然如果要为所有宽度保持相同的3列,请使用
<div class="col">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
<div class="col">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
<div class="col">
<h1>Label1</h1>
<article> content </article>
<article> ... </article>
</div>
上面的'col-4'类仅适用于Bootstrap 4及更高版本
关于html - 将三个自动排序列合并为一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51159790/