Bootstrap Form-无法在输入和输出上获得全宽度折叠时按钮

Question

问题背景：

我有一个产品详细信息页面，允许用户使用按钮将一定数量的项目添加到购物车。这是inline-form，允许输入和按钮彼此相邻放置，如下所示：

问题：

当网站折叠后在小屏幕设备上观看时，我无法获得输入和按钮以跨越容器的整个宽度。下图显示了网站看起来如何折叠，注意 黑色箭头指向我希望输入和按钮跨越的红线：

HTML：

       <div class="row">
        <div class="col-lg-12">
            <div class="testDesc">
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <input id="productQty" type="text" value="1" name="demo1" class="form-control">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" id="myLink">Add To Cart</button>
                </form>
            </div>
        </div>
    </div>

Answer 1

如果您想要这些元素100%的宽度，则必须删除<div class="input-group">并将类btn-block添加到按钮

  <form class="form-inline">
     <div class="form-group">
        <input id="productQty" type="text" value="1" name="demo1" class="form-control">            
     </div>
     <button type="submit" class="btn btn-primary btn-block" id="myLink">Add To Cart</button>
  </form>