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

Answer 2

如果您要使过滤器位于同一行，则必须将其与其他输入项移到同一父div内：

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

添加了CSS，以使放大镜图标出现在搜索输入中：

#fixtures-filter {
  position: relative;
}
span.search-mg {
    position: absolute;
    z-index: 10;
    font-size: 20px;
    line-height: 38px;
    left: 45px;
}

.padleft {
  padding-left: 30px;
}

提琴：http://jsfiddle.net/5xkbn3o0/

输入前置创建两行

2 个答案: