Bootstrap输入组移动端换行及表单边框问题求助

一、阻止「Go」按钮在移动端换行 #

问题根源有两个：一是你使用的Bootstrap 3没有flex-nowrap这类强制不换行的内置类（该类是Bootstrap 4+新增）；二是原HTML结构中form标签嵌套在input-group内部，破坏了Bootstrap的布局规则。

修复方案： #

1. 调整HTML结构
   把form标签移到input-group外层，让input-group作为form的直接子元素，确保Bootstrap的表格布局逻辑正常生效：

{% if base['search_bar'] %}
<div class="navbar-form navbar-left col-lg-6">
  <form method="POST" action="{{ url_for('search') }}">
    {{ base['search_bar'].hidden_tag() }}
    <div class="input-group">
      {{ base['search_bar'].search_for(class="form-control", placeholder="Search with Barcode") }}
      <span class="input-group-btn">
        {{ base['search_bar'].start_search(class="btn btn-primary") }}
      </span>
    </div><!-- /input-group -->
  </form>
</div><!-- /.col-lg-6 -->
{% endif %}

2. 添加自定义CSS强制不换行
   给input-group添加自定义样式，确保在所有屏幕尺寸下都保持输入框与按钮同行：

/* 自定义不换行的input-group类 */
.input-group.no-wrap {
  white-space: nowrap;
  width: 100%;
}

/* 确保输入框和按钮在容器内正确排列 */
.input-group.no-wrap .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  flex: 1;
}

.input-group.no-wrap .input-group-btn {
  display: inline-block;
  vertical-align: middle;
}

之后给你的input-group加上no-wrap类：

<div class="input-group no-wrap">

二、移除移动端表单的灰色线条 #

Bootstrap 3的navbar-form在屏幕宽度小于768px时，默认会添加上下灰色边框，通过以下CSS覆盖该样式即可：

@media (max-width: 767px) {
  .navbar-form {
    border: none !important;
    box-shadow: none !important;
  }
}

内容的提问来源于stack exchange，提问作者Troy