html - 移动时的 Bootstrap 形式

Question

我正在使用文本框内带有按钮的站点搜索表单。在桌面版本上它工作正常，但是在调整到移动设备时它不是。我正在使用一个position:absolute；设置按钮定位，给它一个固定的位置。有什么方法可以让我在移动版本上也能正常工作吗？

HTML:

    <!-- Right search form -->
    <div class="col-md-3 col-xs-12">
      <form class="form-inline" role="search">
        <div class="form-group">
          <input type="text" class="form-control search-input" size="40" placeholder="Cauta in site...">
          <input type="submit" value="" class="search-button" id="searchsubmit">
        </div>
      </form>
    </div>

CSS:

.search-button {
background: url('../images/search-btn.png') right no-repeat;
border: 0px solid black;
border-left: none;
cursor: pointer;
height: 35px;
width: 35px;
position:absolute;
left:241px;
top: 3px;
}

Answer 1

你可以使用 Bootstrap 类 reference here

 <div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
  <input type="text" placeholder="Cauta in site..." class="form-control">
</div><!-- /input-group -->