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