响应式的列重置

 

以下实例包含了4个网格，但是我们在小设备浏览时无法确定网格显示的位置。

 

为了解决这个问题，可以使用 .clearfix class和 响应式实用工具来解决，如下面实例所示：

 

实例

<div class="container">

    <div class="row" >

        <div class="col-xs-6 col-sm-3" 

            style="background-color: #dedef8;

            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-xs-6 col-sm-3" 

        style="background-color: #dedef8;box-shadow: 

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 

            enim ad minim veniam, quis nostrud exercitation ullamco laboris 

            nisi ut aliquip ex ea commodo consequat.

            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            eiusmod tempor incididunt ut. 

            </p>

        </div>

 

        <div class="clearfix visible-xs"></div>

 

        <div class="col-xs-6 col-sm-3" 

        style="background-color: #dedef8;

        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 

            laboris nisi ut aliquip ex ea commodo consequat. 

            </p>

        </div>

        <div class="col-xs-6 col-sm-3" 

        style="background-color: #dedef8;box-shadow: 

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 

            enim ad minim 

            </p>

        </div>

    </div>

</div>

 

 

浏览器上调整窗口大小查看变化，或在您手机上查看效果。