Div在引导程序Navbar中具有独立的自定义下拉列表

Question

我有this little profile dropdown，我想放在我的bootstrap Navbar中。如上所述，它是一个下拉列表，但有两个问题。 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%;}