html - input-prepend 创建两行

Question

我试图在搜索字段的两侧添加两个按钮，所以我这样做了:

<div id="fixtures-filter">
  <div class="input-group-btn">
    <div class="input-group-prepend"><button type="button" class="btn btn-light" aria-expanded="false" id="countries-btn">Filters</button></div>
    <div class="app-search">
      <div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="mdi mdi-magnify"></span>
        <div class="input-group-append"><button type="button" class="btn btn-light" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button> </div>
      </div>
    </div>
  </div>
</div>

结果真的很奇怪:

This is a JSFIDDLE .

Answer 1

使用追加和前置。根据需要调整边框，使搜索图标显示在输入框内。

   <div class="input-group">
              <span class="input-group-prepend">
                    <button class="btn btn-primary" type="button">
                        Filters
                    </button>
              </span>
              <span class="input-group-prepend">
                    <div class="input-group-text bg-transparent border-right-0"><i class="fa fa-search"></i></div>
              </span>
              <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input">
              <span class="input-group-append">
                   <button class="btn btn-outline-secondary border-left-0 border" type="button">
                       Search
                   </button>
              </span>
   </div>

https://www.codeply.com/go/KJcZWvSsR9