PC 上的问题 browser/screen 3 列（拆分文章）采用响应式设计 (html)

Question

<div class="row articles">
<div class=" col-md-4 col-sm-6">
   <article>
       <p></p>
   </article>
   <article>
       <p></p>
   </article>
</div>
<div class=" col-md-4 col-sm-6">
   <article>
       <p></p>
   </article>
   <article>
       <p></p>
   </article>
</div>
</div>

当我在 PC 上调整大小时，它只显示 2 列而不是 3 列我做了 "meta/viewport" 以及 "clear" 的事情响应式设计在手机和平板电脑上运行良好但是当涉及到 PC 屏幕时无论我尝试什么它都会做奇怪的事情

Answer 1

咨询 documentation for Bootstrap 4 我发现你遗漏了 .col class。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row articles">
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 1</p>
   </article>
   <article>
       <p>Article 2</p>
   </article>
</div>
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 3</p>
   </article>
   <article>
       <p>Article 4</p>
   </article>
</div>
<div class="col col-md-4 col-sm-6">
   <article>
       <p>Article 5</p>
   </article>
   <article>
       <p>Article 6</p>
   </article>
</div>
</div>

PC 上的问题 browser/screen 3 列（拆分文章）采用响应式设计 (html)

Problem on PC browser/screen 3 columns (split article) with responsive design (html)

html

css

containers

responsive-design