Question

我搞砸了bootstrap 4 nav实用程序。我知道它们会自动指定为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 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>

Answer 2

我不这么认为，如果可以仅使用引导程序类来完成此操作。如果要在小屏幕设备上进行垂直导航，请使用以下代码。

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

我建议您使用最新版本的引导程序。

导航类bootstrap4的大小和特异性存在问题

2 个答案: