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>