如何在Bootstrap的form-inline及input-group中设置自适应自定义输入框宽度？

你的问题核心出在**硬编码的固定宽度.someClass**上——550px的宽度在移动端窄屏上会直接超出视口，导致布局错乱。咱们一步步来修复：

问题根源分析 #

• .someClass {width:550px;}是固定死的宽度，移动端（屏幕宽度<768px）根本放不下这个尺寸
• 你只给min-width:768px的场景写了适配规则，完全没考虑移动端的宽度控制，输入框自然无法自适应

修复方案 #

1. 给固定宽度加响应式限制 #

保留原有的PC端宽度，同时通过max-width和媒体查询让它在移动端自动适配：

.someClass {
  width: 550px; /* PC端维持原宽度 */
  max-width: 100%; /* 强制不超出父容器 */
}

/* 移动端（屏幕<768px）时，让输入框容器占满宽度 */
@media (max-width: 767px) {
  .someClass {
    width: 100%;
  }
}

/* 保留你原有的PC端form-control规则 */
@media (min-width: 768px){
  .form-inline .form-control {
    width: 100%;
  }
}

2. 简化结构（更推荐） #

其实你可以去掉额外的.someClass容器，直接用input-group本身的响应式特性来控制宽度，代码更简洁：

<form class="form-inline text-center" role="form">
  <div class="input-group" style="max-width: 550px; width: 100%;">
    <input type="text" class="form-control" placeholder="Name" name="name">
    <div class="input-group-btn">
      <button class="btn btn-primary" type="submit">Send</button>
    </div>
  </div>
</form>

这样input-group会自动适配：PC端最大宽度550px，移动端直接占满100%可用空间，完全不用额外容器。

完整修复后的代码 #

.someClass {
  width: 550px;
  max-width: 100%;
}

@media (max-width: 767px) {
  .someClass {
    width: 100%;
  }
}

@media (min-width: 768px){
  .form-inline .form-control {
    width: 100%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootswatch.com/3/darkly/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="form-inline text-center" role="form">
  <div class="input-group">
    <div class="someClass">
      <input type="text" class="form-control" placeholder="Name" name="name">
    </div>
    <div class="input-group-btn">
      <button class="btn btn-primary" type="submit">Send</button>
    </div>
  </div>
</form>

为什么这样有效？ #

• max-width:100%是响应式布局的核心，确保元素永远不会超出父容器的边界
• 针对移动端的媒体查询直接把宽度拉满，适配各种小屏幕
• 去掉了内联的style="width:100%"，用统一的CSS规则控制，后期维护更方便

内容的提问来源于stack exchange，提问作者Mateusz Bacławski