无法以百分比而不是px值指定大型菜单的大小

Question

嗨，我尝试在Bootstrap 4导航栏的下拉菜单中创建一个响应式超级菜单。 但是问题是我无法以百分比指定下拉容器的宽度。当我指定的宽度 以像素为单位，它的工作正常，但我想使用百分比值代替固定的像素值。 该代码有什么问题？我检查了引导文件中dropdown-menu的定义，但是没有宽度说明。

 <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Simple Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMain"  style="width:400px"> 

        <div class="row">
        <div class="col-md-6"> 
        <h6>Head1</h6>
        <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link1</a></li>
        </ul></div>
         <div class="col-md-6">
         <h6>Head2</h6>
        <ul>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link2</a></li>
        </ul></div>
        </div>

        </div>
      </li>

上面的代码给出了预期的结果。但是将样式更改为style="width:25%;"时会出现对齐问题。需要帮助我的新本。

Answer 1

我得到了一个解决方案，该问题是由于在第一个dropdown中调用了引导类li而发生的。如果这样做，子级下拉菜单将仅基于其上级父级设置其宽度。但是当我删除该dropdown类时，宽度将与整个屏幕尺寸相关，从而使我们可以按百分比指定宽度。