Question

我的代码当前为

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

基本上，我有三列带有标签的标签，这些标签可以按日期自动排序和显示我的文章，但是在一个小屏幕上，所有列都堆叠在一起，从而破坏了排序。有没有一种方法可以将三列合并为一列，从而按日期而不是单独地将所有三个类别排序？

Answer 1

最好将所有内容都放在一列，即标签，内容和...

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及更高版本

将三个自动排序列合并为一个

1 个答案: