javascript - 引导卡不会始终弯曲到全宽

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>

标签： javascripthtmlcssbootstrap-4

Answer 1

您不需要flex在此处使用类来将“未找到结果”设置为全宽。实际上，之所以不采用全宽，是因为在绝对定位下，元素的宽度设置为auto. “未找到结果！” 不够长，无法覆盖输入组的整个宽度。

解决方法是将结果框的宽度设置为 100%，或者告诉绝对定位元素从左右开始的位置，即left: 0; right: 0;.

<div class="card shadow border-top-0 result-box">
    <ul class="list-unstyled">
        <li>
            <h6>NO RESULTS FOUND!</h6>
        </li>
    </ul>
</div>

我分配了一个 CSS 类.result-box，这样您就不必进行内联样式设置。

.result-box {
    position: absolute;
    z-index: 2;

    /* Either use 100% width, or the left right combination */
    width: 100%;

    /*left: 0;
    right: 0;*/

    padding: 1rem 1.5rem;
    top: 100%;
}

演示： https ://jsfiddle.net/davidliang2008/oe3hk27g/19/

哦，我不认为你可以<h6 />用一个段落来换行，所以我在我的演示中改变了它。