Проблема с размерами и спецификой класса nav bootstrap4

Question

Я возиться с утилитами начальной загрузки 4.Я понимаю, что они автоматически обозначаются как flexbox.Я хочу, чтобы навигация была вертикальной, пока не будет достигнут md, и в этот момент навигация переключится на горизонтальную.В вертикальном положении я хочу, чтобы навигация занимала 20% доступного видового экрана, а в горизонтальном - я хочу, чтобы он был контейнерно-текучим.Я могу повернуть вертикаль до 20%, но это также переопределяет горизонталь.Помощь оценена, спасибо.Вот мой код:

.flex-column {
  width: 20%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-center border">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>

Answer 1

Я так не думаю, если это возможно сделать только с помощью классов начальной загрузки. Используйте следующий код, если вы хотите иметь вертикальную навигацию на маленьком экране устройства.

@media (max-width: 768px) {
  .w-s-20 {
    width: 20% !important;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills d-flex flex-column flex-md-row  justify-content-center border w-s-20 ">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>

---

Я рекомендую вам использовать последнюю версию загрузчика.

Answer 2

Используйте Media Queries для их нацеливания только на средних устройствах. В качестве альтернативы, вы можете использовать vw вместо % для ширины области просмотра.

@media (max-width: 992px) {
  .flex-column {
    width: 20vw;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-center border">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>