引导输入组字段大小不正确

Question

我在使用 Bootstrap 时遇到了问题。我对这个框架有点陌生，我试图获得一个带有<select> 下拉列表和一个用于单击搜索的按钮的搜索栏。但由于某种原因，<input> 的大小不符合列宽。它的尺寸很小，但<input> 标签右侧的下拉菜单和按钮是我希望它们出现的位置。有人可以帮帮我吗？

谢谢！

<div class='container'>
  <div class='row'>
    <div class='col-sm-12 col-md-12 col-lg-12'>
      <form method='get' action='search_results.php' class='form-inline'>

        <div class='input-group'>
          <div class='input-group-btn'>
            <select id='selector' class='selectpicker form-control' data-live-search='true'>
              <option>Categories</option>
              <option>Computers</option>
            </select>
          </div>

          <div class='input-group'>
            <input type='text' class='form-control' placeholder='Search' name='searchTerm'>
          </div>
          <div class='input-group-btn'>
            <button class='btn btn-default'><i class='glyphicon glyphicon-search'></i>
            </button>
          </div>
        </div>
      </div>
      </form>

    </div>
  </div>
</div>

Answer 1

发生的事情是您将所有内容都包装在 input-group 中，它基本上控制了对象的大小。我删除了搜索周围的环绕，但保留了它的类别。你可以看到我设置了一个 150px 宽度的内联 css（你可以在 CSS 端设置这个以更好地管理它）

<div class='col-sm-12 col-md-12 col-lg-12'> 
                <form method='get' action='search_results.php'>
                    <div class='input-group'>
                        <div class='input-group-btn' style="width:150px">
                            <select id='selector' class='selectpicker form-control' data-live-search='true'>
                                <option>Categories</option>
                                <option>Computers</option>
                            </select>
                        </div>
                        <input type='text' class='form-control' placeholder='Search' name='searchTerm'>
                        <div class='input-group-btn'>
                            <button class='btn btn-default'><i class='glyphicon glyphicon-search'></i></button>
                        </div>
                    </div>
                </form>
            </div>