Bootstrap 卡不会一直弯曲到全宽

Question

我的博客上有以下搜索输入，到目前为止使用simple-jekyll-search. 我在卡片中显示结果z-index: 2;但是，当没有搜索结果时，卡片不会弯曲到全宽。我只是不明白我在这里做错了什么。请在下面找到相关代码。搜索结果由 id 分配search-result为列表项。如何正确使用flex此处的类使“未找到结果”文本弯曲到全宽？我应该把flex-column,flex-sm-row和放在哪里flex-sm-fill？d-flex这里的课怎么玩？<nav>    <!-- removed -->     <!-- Right side items -->    <form class="navbar-nav form-inline flex-column flex-sm-row" style="flex-basis: 350px;">      <!-- Fill on sm breakpoint -->      <div class="input-group flex-sm-fill">        <input class="form-control" id="search-box" type="search" placeholder="Search">        <div class="input-group-append">          <span class="input-group-text">            <i class="fa fa-search" aria-hidden="true"></i>          </span>        </div>        <div class="card shadow px-4 border-top-0" id="result-box" style="display: none; position: absolute; top: 49px; z-index: 2;">          <ul class="list-unstyled" id="search-result"></ul>        </div>      </div>    </form>  </div></nav>这是javascript部分：<script>  SimpleJekyllSearch({    searchInput: document.getElementById('search-box'),    resultsContainer: document.getElementById('search-result'),    searchResultTemplate: `    <li>      <a href="{url}">        <p><h6>{title}</h6></p>      </a>      <p>Category: <span class="badge badge-dark">{category}</span> Tags: <span class="badge badge-info">{tags}</span></p>     </li>`,    json: '/search.json',    noResultsText: `    <li>      <p><h6>No results found!</h6></p>    </li>`  })</script>