什么会导致引导列像行一样？答案

【问题标题】：What would cause bootstrap columns to act like rows?什么会导致引导列像行一样？
【发布时间】：2014-03-06 09:09:42
【问题描述】：

我无法弄清楚为什么这些列类不能正常工作。它们是垂直堆叠的。我对 boostrap 还很陌生，所以我可能会遗漏一些明显的东西。

任何帮助将不胜感激。提前谢谢。

HTML-

<div class="row content-container">
        <div class="row top-nav">
            <div class="row header">
                <div class="col-lg-4 logo">
                    <img src="images/logo.png">
                </div>
                <div class="col-lg-8 nav-area">
                    <div class="row number">
                        888.888.8888
                    </div>
                    <div class="row navigation">

                    </div>
                    <div class="row heading">

                    </div>
                </div>
            </div>
            <div class="row sub-nav">
            </div>
        </div>  
        <div class="row content-footer"></div>
    </div>

SCSS-

.content-container{
        position: relative;
        background-image:url("images/border-vertical.png"), url("images/parchment-bg.jpg"), url("images/border-vertical.png");
        background-position: top left, top center, top right;
        background-origin: border-box, content-box, border-box;
        background-repeat: repeat-y, repeat-y, repeat-y;
        height: 1500px;
        width: 972px;
        margin: auto;
        padding: 20px 56px 0 56px;

        .nav-area{
            position: relative;

            .number{
                background-image:url("images/phone-number-bg.png")
            }
        }

        .content-footer{
            background-image: url("images/border-horizontal.png");
            background-repeat: repeat-x;
            background-origin:content-box;
            height: 31px;
            width: 892px;
            position: absolute;
            bottom: 0px;
            left: 40px;
        }

    }

【问题讨论】：

您查看浏览器的哪些维度没有达到您的预期？从技术上讲，你真的不需要row 来做你想做的事。通常col-[size]-[num] 足以让 div 以您想要的方式浮动。
我猜分辨率低于 col-lg-* 的断点。如果浏览器分辨率低于特定列类 div 的断点，引导列是否自动堆叠？
是的，如果您点击col-sm-* 断点，即< 768，它是如何工作的。你可能已经看过了，但是here's the bootstrap grid page
我可以只指出行中的行会对对齐产生不利影响。 cols 下的 cols 也是如此。
我不知道。你介意解释一下在这些情况下对齐是如何受到影响的吗？

标签： html css sass twitter-bootstrap-3 col

【解决方案1】：

首先，您不需要将类行放在包含 col-lg-* 的每个 div 中

但是您仍然可以随意堆叠它们。示例：

<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-4">
                ...
            </div>
        </div>
    </div>
</div>

至于你的问题，当你达到 col-lg-* 的最小宽度时，你是对的。这是引导程序的一个特性。这可以防止您的列缩小到无法读取的程度。

但是，您可以为较小的视图添加网格类。像这样：

        <div class="row header">
            <div class="col-md-4 col-lg-4 logo">
                <img src="images/logo.png">
            </div>
            <div class="col-md-8 col-lg-8 nav-area">
                <div class="row number">
                    888.888.8888
                </div>
                <div class="row navigation">

                </div>
                <div class="row heading">

                </div>
            </div>
        </div>

【讨论】：