如何调试 twitter bootstrap v4-alpha 网格？ col-sm-offset-* 不工作

Question

我在某处更改了一些内容，现在 col-sm-offset-* 根本不起作用。例如，如果我想将屏幕分成两半，只在右侧显示内容，我通常会使用：

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-6">
            This content isn't on the right hand side, it's on the left as if the col-sm-offset-6 isn't even there.
        </div>
    </div>
</div>

我怎样才能检查出什么问题？

我正在使用 NPM 和 Laravel Elixir (gulp) 来缩小（准备好生产）文件并且我没有在这里复制整个 CSS 文件，我不知道不知道还能做什么。有什么明显的吗？有人遇到过这个吗？

更新

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-sm-offset-6">
            <div class="row">
                <form role="form" method="POST" action="/register">
                    <input type="hidden" name="_token" value="abcdefghij">
                    <div class="col-xs-12">
                        <fieldset class="form-group">
                            <label for="username" class="form-control-label">Username</label>
                            <input name="username" type="text" class="form-control " id="username" placeholder="Enter a username" value="j">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <fieldset class="form-group">
                            <label for="first_name" class="form-control-label">First Name</label>
                            <input name="first_name" type="text" class="form-control " id="first_name" placeholder="Enter your first name" value="John">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <fieldset class="form-group">
                            <label for="last_name" class="form-control-label">Last Name</label>
                            <input name="last_name" type="text" class="form-control " id="last_name" placeholder="Enter your last name" value="Appleseed">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <fieldset class="form-group">
                            <label for="email" class="form-control-label">Email Address</label>
                            <input name="email" type="email" class="form-control " id="email" placeholder="Enter your email address" value="j@a.com">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <fieldset class="form-group">
                            <label for="password" class="form-control-label">Password</label>
                            <input name="password" type="password" class="form-control " id="password" placeholder="Enter a password" value="password">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <fieldset class="form-group">
                            <label for="password_confirmation" class="form-control-label">Confirm Password</label>
                            <input name="password_confirmation" type="password" class="form-control " id="password_confirmation" placeholder="Please confirm your password" value="password">
                        </fieldset>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary pull-right">Register</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

网络检查器

CSS 计算属性

更新 2

我已经提交了 issue on GitHub，因为这可能是故意的。

Answer 1

GitHub 已正式更改其 col-bp-offset-* 名称，但文档目前已过时。

查看问题：#19099, #19368, #19267, and my own #19562.

我将关闭问题并更新我的 GitHub 问题。

Answer 2

Bootstrap v4 Alpha 的当前正确偏移量 class：

 class="col-md-6 offset-md-3"