在Bootstrap 4中使用较少代码的小屏幕上的响应能力修复

Question

我当前正在使用Bootstrap 4，并且我在下面有此代码，并且正在工作。但是，我需要再次编写它，以便在较小的屏幕上工作，这是不好的。那么，我该如何解决此问题，而无需为移动设备等较小的屏幕编写代码呢？

      <!-- Medium to Large Screens -->
      <div class="row d-block d-md-none">
        <div class="col-lg-6 col-md-6">
          <ul class="profile-menu no-list-style">
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/a']">A</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/b']">B</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/c]">C</a>
            </li>
          </ul>
        </div>
        <div class="col-lg-6 col-md-6">
          <ul class="profile-menu no-list-style">
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/d']">D</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/e']">E</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/f']">F</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- Medium to Large Screens -->
      <!-- Small Screens -->
      <div class="row d-none d-md-block">
        <div class="col-lg-12 col-md-12">
          <ul class="profile-menu no-list-style">
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/a']">A</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/b']">B</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/c]">C</a>
            </li>
           <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/d']">D</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/e']">E</a>
            </li>
            <li routerLinkActive="active" class="nav-item">
              <a class="nav-link" [routerLink]="['/f']">F</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- Small Screens -->

Answer 1

在下面尝试此代码。在移动设备上，除非您有一些覆盖，否则它应该在较小的屏幕上自动创建col-sm-12和col-12。

如果这不起作用，请向我们展示移动设备上的屏幕截图。

<div class="row">
    <div class="col-lg-6 col-md-6">
      <ul class="profile-menu no-list-style">
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/a']">A</a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/b']">B</a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/c]">C</a>
        </li>
      </ul>
    </div>
    <div class="col-lg-6 col-md-6">
      <ul class="profile-menu no-list-style">
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/d']">D</a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/e']">E</a>
        </li>
        <li routerLinkActive="active" class="nav-item">
          <a class="nav-link" [routerLink]="['/f']">F</a>
        </li>
      </ul>
    </div>
  </div>