• 範例

        html,body{
            height: 100%;
        }
        .custom_fixed{
            height: 60px;
        }
        .custom_top{
            background-color: white;
            box-shadow: 0px 0px 5px #DCDCDC;
        }
        .custom_nav{
            font-size: 25px;
            left: 50%;
            transform: translateX(-50%);
        }
        .dropdown-menu{
            left:auto !important; 
            right: 15px;
        }
        .function{
            top: 50%;
            left: 65px;
            transform: translateY(-45%);
        }
        .custom_search:active{
            background-color: white;
        }

<div class="fixed-top custom_fixed">
        <div class="navbar navbar-light custom_top h-100">
            <div class="navbar-brand position-relative custom_nav">聯絡人</div>
            <button class="btn  btn-outline-secondary" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
                </svg>
            </button>
            <div class="dropdown-menu">
                <button class="dropdown-item position-relative" type="button">
                    <svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-person-plus-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm7.5-3a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
                      </svg>
                      <div class="function d-inline-block position-absolute">新增好友</div>
                </button>
                
                <button class="dropdown-item position-relative" type="button">
                    <svg width="25px" height="25px" viewBox="0 0 16 16" class="bi bi-person-x-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6.146-2.854a.5.5 0 0 1 .708 0L14 6.293l1.146-1.147a.5.5 0 0 1 .708.708L14.707 7l1.147 1.146a.5.5 0 0 1-.708.708L14 7.707l-1.146 1.147a.5.5 0 0 1-.708-.708L13.293 7l-1.147-1.146a.5.5 0 0 1 0-.708z"/>
                      </svg>
                      <div class="function d-inline-block position-absolute">刪除好友</div>
                    </button>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item custom_search">
                        <div class="input-group">
                            <input type="text" placeholder="  搜尋好友">
                            <div class="input-group-append">
                              <button class="btn btn-outline-secondary" type="button" id="button-addon2">
                                <svg width="20px" height="25px" viewBox="0 0 16 16" class="bi bi-search" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"/>
                                    <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                                  </svg>
                              </button>
                            </div>
                          </div>
                    </div>   
                    </div>
        </div>
</div>

• 結果