form 表单 width：auto自适应

<form action="" class="form-inline">
   <div class="form-group">
        <label for="" class="form-label">用户名</label>
        <input type="text" class="form-control">
   </div>
</form>

.form-group{
    width: 100%;
    margin-bottom: 10px;
    display: block;
}
.form-control{
    display: block;
    border: 1px solid #ccc;
    padding: 10px 10px;
    width: 100%;
}
@media screen and (min-width: 768px) {
.form-inline .form-group {
      display: inline-block;
      /* auto 自动 宽度由子元素撑起来  */
      /* 覆盖媒体查询外面的width,input输入框宽度变短  */
      width: auto;
    }
 .form-inline .form-control {
      display: inline-block;
       /* 覆盖媒体查询外面的width  */
      width: auto;
      padding: 6px 12px;
    }
}