html - Bootstrap 导航栏中具有独立自定义下拉列表的 Div

Question

我有this little profile dropdown ，我想放在我的 Bootstrap 导航栏中。如前所述，这是一个下拉菜单，但它有两个问题。1) 下拉菜单向旁边展开，奇怪的像下图。 这就导致了第二个问题2) 它会拖拽整个导航栏，扩展它的高度——这对一些人来说很好，如何让它独立于导航栏……以及可能的 3) 定位 - 我很难将其放置在正确的位置 - 我只是希望它与普通导航文本具有相同的位置，我认为这会更容易.. .

我像这样制作(/窃取)了我的个人资料下拉列表；

<div class="profile-wrapper">
    <div id="profile-button">
        <img style="width:35px;" src="http://planestorm.albert-website.design/img/avatars/profile_default.png">
        <p class="p-no-new-line">Username</p>
    </div>
    <div id="profile-dropdown">
        <ul id="profile-content">
            <li><a href="#">Settings</a></li>
            <li><a href="#">Password</a></li>
            <li><a href="#">Avatar</a></li>
            <li><a href="#">Log out</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Preferences</a></li>
            <li><a href="#">Signature</a></li>
        </ul>
    </div>
</div>

(没有 PHP)

我该怎么做？

Answer 1

#profile-button, #profile-dropdown {display:block;width:100%;}