Исправьте отзывчивость на маленьких экранах с меньшим количеством кода в Bootstrap 4 - PullRequest
Новая
       36

Исправьте отзывчивость на маленьких экранах с меньшим количеством кода в Bootstrap 4

0 голосов
/ 06 мая 2019

В настоящее время я использую загрузчик 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 -->

1 Ответ

0 голосов
/ 06 мая 2019

Попробуйте этот код ниже. На мобильном устройстве он должен автоматически создавать 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>
...