Question

我当前正在使用引导程序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>

在Bootstrap 4中用较少的代码修复小屏幕中的响应性

1 个答案: