css - Bootstrap - 如何设置中间列元素以在移动设备和浏览器折叠时呈现全宽

Question

使用 Bootstrap ，我有这段代码:

 <div class="container">

            <div class="row">
                <div class="col-xs-6 col-xs-offset-3">
                    <h2>How to Enjoy Eating Bugs <small>3/6/2015</small></h2>
                    <p> I eat bugs for a living...yum!, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.scing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
                </div>
            </div>
 </div>

页面在桌面上显示时的输出是完美的。

当我折叠页面时，渲染看起来不像我想要的那样:

当页面折叠时我希望渲染看起来像这样:

我可以尝试使用媒体查询来完成此操作，但我认为可能有一种更简单的“Bootstrap ”方法可以解决该问题。如果可能，请用最少的示例代码回答。

Answer 1

将类更改为 col-md-6 col-md-offset-3

当屏幕尺寸低于 bootstrap 定义的中等 (992px) 时，它应该全宽