除非列长度总计<1，否则引导程序中的简单行不显示div。 12

Question

尝试使登录表单布局正常工作并遇到一个奇怪的问题。使用我正在使用的引导程序，我认为左边有4列，空，然后实际的登录表单将占用剩余的8列 - 在断点上查看＆gt; = col-sm。

这是HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4"></div><!-- Empty 4 columns for spacing -->
        <div class="col-xs-12 col-sm-8"> <!-- actual content -->
            <div class="login-form">
                <div class="login-form-desc">
                    <h3>Login</h3>
                    <p>Enter your username and password to log on.</p>
                </div>
                <div class="login-form-btns">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="email" type="text" class="form-control" name="email" placeholder="Username">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="password" type="password" class="form-control" name="password" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <div>
                            <button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px;">Sign in</button>
                        </div>
                    </div>
                    <div>
                        <p><a href="forgotpassword.aspx">Forgot your password?</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但是发生的事情似乎是忽略了col-sm-4并且根本没有显示，而col-sm-8出现在左边。但是，如果我将col-sm-8更改为col-sm-6（这意味着总共10个），它将按预期工作。