Question

如何将行分为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列

Answer 1

我认为在类为row的div内，每个div应该有一个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>

这是您推荐的Working Sample StackBlitz。

Answer 2

    <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-6 col-md-3">
    <p class="msg">Resource Name</p>
    <p class="msg"> Resource Email</p>
    <p class="msg"> Contact</p>
  </div>
  <div class="col-6 col-md-3">
    <p>: shammy</p>
    <p>: shammy@gmail.com</p>
    <p>: 7093241844 </p>
  </div>
  <div class="col-6 col-md-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-6 col-md-3">
    <p>: shammy</p>
    <p>: shammy@gmail.com</p>
    <p>: 7093241844 </p>
    <button class="resd" name="Submit" type="Submit">Reschedule Meeting</button>
  </div>
</div>

上面的代码对我来说很好

将一行分为4列，应在移动设备上以相同的方式显示

2 个答案: