自举col 3排列

Question

我试图在网页上设计这个页脚，并且我已经将文本和社会按钮的容器设置为col-md-3。到目前为止还不错，但是我希望他们把自己排成3到2行，当我调整窗口大小时，它会从4列到3列，然后直接到1列。

<footer class="container-fluid container-footer">

页脚->

    <div class="col-md-2 col-md-offset-1">
        <span> DARKWOOD </span>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
    </div>

    <div class="col-md-2 col-md-offset-1">
        <span> PRODUCTS </span>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
    </div>

    <div class="col-md-2">
        <span> ABOUT</span>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
    </div>

    <div class="col-md-2 social-hub">
        <span> SOCIAL</span>
        <div class="row-fluid for-social">
            <a href="#"><div class="col-xs-3 social" id="facebook"></div></a>
            <a href="#"><div class="col-xs-3 social" id="google-plus"></div></a>
            <a href="#"><div class="col-xs-3 social" id="twitter"></div></a>
            <a href="#"><div class="col-xs-3 social" id="tumblr"></div></a>

        </div>
    </div>
</div>
    <div class="col-md-12" id="copyright"></div>

​

所有代码都在这里：小提琴

另外，图片：

本质上：

​

中级：

​

最后：

​

所以，正如你所看到的，至少有两个类别的空间是最后的图像。

//编辑/你们能想出什么办法来解决这个问题吗？

​

Answer 1

我相信你需要添加更多的类来描述你想要的行为。例如，如果要在小屏幕上使用2x2，则需要执行如下操作：

<footer class="container-fluid container-footer">
    <div class="row-fluid ">
        <div class="col-md-2 col-md-offset-1 col-sm-4 col-sm-offset-2">
            <span> DARKWOOD </span>

            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        </div>
        <div class="col-md-2 col-md-offset-1 col-sm-4 col-sm-offset-2">
            <span> PRODUCTS </span>

            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        </div>
        <div class="col-md-2 col-sm-4 col-sm-offset-2">
            <span> ABOUT</span>

            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
            <p><span class="glyphicon glyphicon-chevron-right"></span> Lorem Ipsum</p>
        </div>
        <div class="col-md-2 social-hub col-sm-4 col-sm-offset-2">
            <span> SOCIAL</span>

            <div class="row-fluid for-social">
                <a href="#"><div class="col-xs-3 social" id="facebook"></div></a>
                <a href="#"><div class="col-xs-3 social" id="google-plus"></div></a>
                <a href="#"><div class="col-xs-3 social" id="twitter"></div></a>
                <a href="#"><div class="col-xs-3 social" id="tumblr"></div></a>

            </div>
        </div>
    </div>
    <div class="col-md-12" id="copyright"></div>
</footer>

请记住，“一行”是12‘单位’宽和任何‘大小’(例如。超过12的( md，sm等)将被包装。因此，在上面，通过将div宽度设置为6(col 4+col偏移-2)，它们将成对包装，直到额外的小尺寸取代。

因此，col-md-3意味着中型容器宽度的3/12s。

还请记住，这些类仅向上申请(例如。col-md-3将在中型和大型，但不小或特别小)工作。