Bootstrap 4如何删除折叠外部的搜索框并正确放置搜索框

Question

在折叠搜索框并将其显示在导航栏顶部中央时，我一直遇到问题。另外，如果我想使用在移动视图的导航栏上具有自己行的li标签创建列表，该如何完成此操作。这是我尝试实现的示例。您将看到搜索框如何位于导航栏的中心，以及li标签如何在其自己的行中显示功能，商品和酒店。我是否必须使用绝对值更改搜索框的位置？想知道实现此任务的最佳方法是什么。

这是我的代码：

https://jsfiddle.net/mikeshasaco/05mfrb6g/5/

#custom-search-input {
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

#custom-search-input .search-query {
  padding-right: 3px;
  padding-right: 4px \9;
  padding-left: 3px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  width: 298px;
}

#custom-search-input button {
  border: 0;
  background: none;
  /** belows styles are working good */
  padding: 2px 5px;
  margin-top: 2px;
  position: relative;
  left: -28px;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #D9230F;
}

.search-query:focus+button {
  z-index: 3;
}

---

{{-- fixed-top --}}
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border-bottom " id="navbarfix" >
        <div class="container">

        <a class="navbar-brand" href="">Exampe</a>
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a id="navbarDropdown " class="nav-link dropdown-toggle " href="" style="color:#B35464; font-size:16px;" role="button" aria-haspopup="true" aria-expanded="false" v-pre> Dropdown <span class="caret"></span> </a>
                    <div class="dropdown-menu mega-menu" aria-labelledby="navbarDropdown">
                        <div class="container">
                            <ul>
                                <li>blog</li>
                                <li>help</li>
                            </ul>
                        </div>
                    </div>

                </li>

                <li class="nav-item active">
                    <a class="nav-link" href="" style="color: #B35464; font-size:16px;"> Help</a>
                </li>


                {{-- name saves the query result to the bar && id query print the result--}}



                <form class="navbar-form" action="" method="GET">
                        <div id="custom-search-input">
                            <div class="input-group  col-md-12">
                                <input type="text"  name="query" id="query" value="" class="search-query form-control" placeholder="Search for ">
                            </div>
                        </div>

                </form>


            </ul>



            <ul class="navbar-nav ml-auto">


                <li><a class="nav-link" href="{{ route('login') }}">Login</a></li>
                <li><a class="nav-link" href="{{ route('register') }}">Register</a></li>

            </ul>

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