Question

我尝试使用bootstrap4beta和dropdown-menu构建垂直菜单。我希望下拉列表显示在右侧。但是对于dropdown-menu-right，我只能让它出现在下一行而不是同一行。怎么做？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="nav flex-column col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
  <a class="nav-link active backgroundnav" href="#">HTML</a>
  <a class="nav-link backgroundnav" href="#">CSS</a>
  <a class="nav-link backgroundnav" href="#">JavaScript</a>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle backgroundnav" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
    Preview
    </a>
    <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="Preview">
      <a class="dropdown-item" href="#">Mobile Phone</a>
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Laptop</a>
      <a class="dropdown-item" href="#">Desktop</a>
    </div>
  </li>
</nav>

＆＃13;

感谢。

Answer 1

Bootstrap 4 popper.js定位下拉列表，因此定制定位并不容易。你可以用这样的一些CSS覆盖，但棘手的部分是找出＆＃34; 65％＆＃34;值基于下拉链接的宽度。

.dropdown-menu-side {
    transform: translateX(65%) !important;
}

https://www.codeply.com/go/BI2Gs7viID

如何使此下拉菜单与其父级显示在同一行？

1 个答案: