时间戳

首页 > 解决方案 > 将一行分成 4 列，在移动设备上显示相同

html - 将一行分成 4 列，在移动设备上显示相同

问题描述

如何将一行分成 4 列，在移动设备上应该是 2 行，每行 2 列。尝试角度 6

        <div class="row" id="info" *ngIf="this.details">
  <div class="col-md-12 mb-3" id="heading">
    <h3>Meeting Information</h3>
  </div>
  <div class="col-md-2 mb-3">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>
  <div class="col-md-4 mb-3">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
  </div>
  <div class="col-md-2 mb-3">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
  </div>
  <div class="col-md-4 mb-3">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
    <div>
      <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
    </div>
  </div>
</div>

它在纯 HTML 上运行良好。当我看到响应性时，它是 2 行，每行 2 列。这同样适用于我的角度代码

<div class="col-xs-12 col-sm-6">
 <div class="col-xs-3 col-sm-6">
 <p>Column 1</p>
 <p>Column 1</p>
 <p>Column 1</p>
 <p>Column 1</p>
 </div>
  <div class="col-xs-3 col-sm-6">
  <p>Column 2</p>
  <p>Column 2</p>
  <p>Column 2</p>
  <p>Column 2</p>
  </div>

</div>
<div class="col-xs-12 col-sm-6">
 <div class="col-xs-3 col-sm-6">
 <p>Column 3</p>
 <p>Column3</p>
 <p>Column 3</p>
 <p>Column 3</p>
 </div>
  <div class="col-xs-3 col-sm-6">
  <p>Column 4</p>
  <p>Column 4</p>
  <p>Column 4</p>
  <p>Column 4</p>
  </div>
</div>

我在角度尝试了相同的 HTML，但它的工作方式相同。它应该分为 2 行，每行 2 列

标签： htmlangularbootstrap-4angular-material

解决方案

我认为在带有 class 的 div 内部row，每个 div 都应该有一个 class ，col-xl-3 col-lg-3以使其在超大型和大型设备上跨越单行，并col-md-6 col-sm-6 col-xs-6使其在中型、小型和超小型设备上跨越两行。

试试这个：

<div class="row" id="info" *ngIf="this.details">
  <div class="col-lg-12" id="heading">
    <h3>Meeting Information</h3>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <p class="msg">Meeting Title</p>
    <p class="msg">Meeting Feedback Link</p>
    <p class="msg">Meeting Time</p>
    <button class="cncl" name="Submit" type="Submit">Cancel Meeting</button>
  </div>


  <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-xs-6">
    <div>
      <p>: shammy</p>
    </div>
    <div>
      <p>: shammy@gmail.com</p>
    </div>
    <div>
      <p>: 7093241844 </p>
    </div>
    <div>
      <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
    </div>
  </div>
</div>

这是您参考的工作示例 StackBlitz。

推荐阅读