html - Bootstrap col-md-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>

所有代码都在这里: Fiddle

另外，图片:

最初:

中级:

最后:

因此，如您所见，最终图像有足够的空间容纳至少 2 个类别。

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

Answer 1

我相信您需要添加额外的“col”类来描述您想要的行为。例如，如果你想在小屏幕上使用 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 个“单位”，“大小”(例如 md、sm 等)超过 12 的任何内容都将被换行。所以在上面，通过将 div 宽度设置为 6 (col-sm-4 + col-sm-offset-2)，它们将成对包装，直到超小尺寸接管。

因此，col-md-3 表示中型容器宽度的 3/12s。

另请记住，这些类别仅适用于向上(例如，col-md-3 适用于中型和大型，但不适用于小型或超小型)。