Question

我在下面的引导代码中使用一个下拉按钮。它适用于下拉菜单，但在移动设备上没有响应。如何使其具有响应性。

  <div class=" col-sm-4 col-xs-6">
    <div class="guu">
    <a href="{{url('login')}}" class="boxed-btn blank">Login</a>
    <div class="dropdown">
      <button class="dropbtn boxed-btn blank">Register</button>
      <div class="dropdown-content">
     <a href="http://realbitvalley.com/register?ref=admin&pos=L" class="boxed-btn blank">Left Side</a>
      <a href="http://realbitvalley.com/register?ref=admin&pos=R" class="boxed-btn blank">Right Side</a>


    </div>
     </div>             
    </div>
      </div>
     </div>

先谢谢了。

Answer 1

您应该列出清单！

  <ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>

如此处所写： https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

Answer 2

@waqar，请提供一个有效的代码段，以便我们能够及时发现问题，请查看下面的有效代码段，看看它是否对您有帮助：）

注意：请遵循引导程序下拉列表的文档，该文档将解决您面临的问题，

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

如何使响应式引导下拉按钮？

2 个答案: