html - 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>