Question

我正在尝试使文本框左侧的过滤器与文本框的高度完全相同，并且宽度较小;与此图片完全一样

我的代码和当前搜索框如下所示：

<div class="container">
<div class="row">
    <div class="col-xs-8 col-xs-offset-2">
        <form action="#" method="get" id="searchForm" class="input-group">

            <div class="input-group-btn search-panel">
                <select name="search_param" id="search_param" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <option value="all">All</option>
                    <option value="username">Username</option>
                    <option value="email">Email</option>
                    <option value="studentcode">Student Code</option>
                </select>
            </div>
            <input type="text" class="form-control" name="x" placeholder="Search term...">
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </form><!-- end form -->
    </div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->

Answer 1

CSS已关闭，因为您使用<select>元素作为<button class="dropdown-toggle">。将您的HTML更改为以下内容：

<div class="container">
  <div class="row">
    <div class="col-xs-8 col-xs-offset-2">
      <form action="#" method="get" id="searchForm" class="input-group">

        <div class="input-group-btn search-panel">
          <button id="search_condition" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">All <span class="caret"></span></button>
          <input name="search_param" value="all" type="hidden">
          <ul class="dropdown-menu">
            <li class="option_select" data-value="all"><a href="#">All</a></li>
            <li class="option_select" data-value="username"><a href="#">Username</a></li>
            <li class="option_select" data-value="email"><a href="#">Email</a></li>
            <li class="option_select" data-value="studentcode"><a href="#">Student Code</a></li>
          </ul>
        </div>
        <input class="form-control" name="x" placeholder="Search term..." type="text">
        <span class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <span class="glyphicon glyphicon-search"></span>
          </button>
        </span>
      </form><!-- end form -->
    </div><!-- end col-xs-8 -->
  </div><!-- end row -->
</div><!-- end container -->

将<select>替换为一个按钮，该按钮可以使用一个选项列表切换下拉列表，每个选项都包含一个attr data-value=""，该值与select中的选项值相匹配。这解决了CSS问题，但您需要一些自定义JavaScript来处理选项的选择：

$(".option_select").on("click", function(){
  $("input[name=search_param]").val($(this).attr("data-value"));
  $("#search_condition").html($(this).text() + ' <span class="caret"></span>');
});

这样做是将按钮的标签设置为选项的标签，并将隐藏的<input>元素的值设置为所选选项的值。

以下是一个工作示例：

Bootply

Answer 2

试试这个：

<div class="container">
<div class="row">
    <div class="col-xs-8 col-xs-offset-2">
        <form action="#" method="get" id="searchForm" class="input-group" >

            <div class="input-group-btn search-panel">
                <select name="search_param" id="search_param" class="btn btn-default dropdown-toggle  form-control" style="width:150px;" data-toggle="dropdown">
                    <option value="all">All</option>
                    <option value="username">Username</option>
                    <option value="email">Email</option>
                    <option value="studentcode">Student Code</option>
                </select>
            </div>
            <input type="text" class="form-control" name="x" placeholder="Search term...">
            <span class="input-group-btn">
                <button class="btn btn-default form-control" type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
            <!-- <button class="btn btn-primary" type="submit">Search</button> -->
        </form><!-- end form -->
    </div><!-- end col-xs-8 -->
</div><!-- end row -->
</div><!-- end container -->

使选择列表与文本框

2 个答案: