引导4布局在与窗体一起使用时不像预期的那样工作

Question

我正在一份表格上与Bootstrap 4合作。现在，当与网格类一起使用表单时，它实际上并不像它应该的那样工作。输出可以在这里看到，http://www.henryspike.tk/testform

我所期望的是看到整个12列被分成4-4-4个，每个列都包含一个输入字段，但是它堆积起来了。

<div class="row">
                    <div class="col-md-12 offset-md-1">
                        <div class="row">
                            <form class="form">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="email">Name</label>
                                        <input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="username">Name</label>
                                        <input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

Answer 1

col-应该永远是row的直接子代。

http://www.codeply.com/go/moFmNMMuPs

<div class="row">
    <div class="col-md-12">
        <form class="row form">
            <div class="col-md-4">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required="">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="email">Name</label>
                    <input class="form-control" type="email" name="email" id="email" placeholder="someone@example.com" required="">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="username">Name</label>
                    <input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required="">
                </div>
            </div>
        </form>
    </div>
</div>