在 12 网格引导程序布局中拟合 8 列布局？

Question

好的，所以我试图使用 Bootstrap 重新创建这个页面，但我在这部分被卡住了。

我的两个问题是：

1. 这些行应该使用哪个 html 元素？
2. 如何将 12 列布局分成 8 个相等的部分？

代码示例：

<div class="container" style="margin-top: 3%; ">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="First Name">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Last Name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Display name">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <div class="form-group">
                        <input type="text" class='form-control' placeholder="Email Address">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Password">
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="password" class='form-control' placeholder="Confirm Password">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-3">
                    <button class="btn btn-secondary">I Agree</button>
                </div>
                <div class="col-xs-9">
                    <p>
                        By clicking <span class="label label-primary">Register</span> you agree to the <a href=#>Terms and Conditions</a> set out by this site, including our Cookie Use
                    </p>
                </div>
            </div>

            <div class="row">

            </div>

            <div class="row" style="">
                <div class="col-xs-6">
                    <button class="btn btn-primary btn-block" style="font-weight: bold;">Register</button>
                </div>
                <div class="col-xs-6">
                    <button class="btn btn-success btn-block" style="font-weight: bold; ">Sign In</button>
                </div>
            </div>

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

Answer 1

另一种方法是将行分成两部分，每半对四，如下所示：

<div class="row">
    <div class="col-xs-6>
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
    <div class="col-xs-6">
        <div class="row">
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
            <div class="col-xs-3></div>
        </div>
    </div>
</div>

所以你将有八个相等的部分，并将保存包装。

这些行应该使用哪个 html 元素 - 在这里您可以尝试使用 div、span 甚至 hr。你试一试。:)