Javascript 如何将HTML表单拆分为两列

目前这是我的代码

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>        
            <form name="form" ng-submit="" role="form">
                <div class="form-group">
                    <label for="CustomerName">Customer Name</label>
                    <i class="fa fa-key"></i>
                    <input type="text" name="CustomerName" id="CustomerName" class="form-control" ng-model="CustomerName" required />
                    <span style="color:red" ng-show="form.CustomerName.$dirty && form.CustomerName.$error.required" class="help-block">Customer Name is required</span>
                </div>

                <div class="form-group">
                    <label for="CustomerAddress">Customer Address</label>
                    <i class="fa fa-key"></i>
                    <textarea type="text" name="CustomerAddress" id="CustomerAddress" class="form-control" ng-model="CustomerAddress" rows="4" required ></textarea>
                    <span style="color:red" ng-show="form.CustomerAddress.$dirty && form.CustomerAddress.$error.required" class="help-block">Customer Address is required</span>
                </div>

                <div class="form-group">
                    <label for="CustomerCity">Select City</label>
                    <i class="fa fa-key"></i>
                    <select name="CustomerCity" id="CustomerCity" class="form-control" ng-model="CustomerCity" required>
                        <option value="" ng-selected="selected">-- Select City -- </option>
                        <option value="Chhatarpur">Chhatarpur</option>
                    </select>
                    <span style="color:red" ng-show="form.CustomerCity.$dirty && form.CustomerCity.$error.required" class="help-block">City is required</span>
                </div>

                <div class="form-group">
                    <label for="CustomerMobile">Mobile Number</label>
                    <i class="fa fa-key"></i>
                    <input type="text" name="CustomerMobile" id="CustomerMobile" class="form-control" ng-model="CustomerMobile" maxlength="10" required />
                    <span style="color:red" ng-show="form.CustomerMobile.$dirty && form.CustomerMobile.$error.required" class="help-block">Mobile Number is required</span>
                </div>

                <div class="form-group">
                    <label for="PaymentOption">Payment Option</label>
                    <i class="fa fa-key"></i>
                    <div>
                        <input type="radio" name="myRadio" ng-model="myRadio" value="1" required> Cash on delivery<br />
                        <input type="radio" name="myRadio" ng-model="myRadio" value="2" required> Card on delivery<br />
                    </div>
                </div>

            </form>
            </td>

            <td>
                <div class="form-group">
                    <label for="PaymentOption">Payment Option</label>
                    <i class="fa fa-key"></i>
                    <div>
                        <input type="radio" name="myRadio" ng-model="myRadio" value="1" required>Cash on delivery<br />
                        <input type="radio" name="myRadio" ng-model="myRadio" value="2" required>Card on delivery<br />
                    </div>
                    <span style="color:red" ng-show="form.myRadio.$dirty && form.myRadio.$error.required" class="help-block">Mobile Number is required</span>
                </div>

                <div class="form-actions">
                    <button type="submit" ng-disabled="form.$invalid" class="btn btn-danger">Place order</button>
                </div>

            </td>                       

        </tr>
    </tbody>
</table>

请注意，标签位于第一列（即第一列）内。我想让第二列字段也成为此表单的一部分

我现在应该把表单标签移到哪里。我试着把它放在后面，但它不起作用，因为我认为第一个标签应该放在后面

我也可以使用TwitterBootstarp的容器类、行类和列类，但也存在同样的问题，所有内容都应该在列类中

---

请帮我做这个

根据我的经验；我会选择前端框架

引导： 基金会：

---

因为他们会给你很多功能；也就是说，你可以随时创建专栏；基金会是友好的使用，所以你应该给它去！ 如果我正确理解了您的问题，您希望将这两个问题都放在表单标签中

解决方案1：表单标签中的整个表

<form name="form" ng-submit="" role="form">
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                . .
            </td>
            <td>
                . .
            </td>
        </tr>
    </tbody>
</table>
</form>

如果您不想将整个表放在表单标记中

解决方案2：在第一个表中创建另一个表

<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                <form name="form" ng-submit="" role="form">
                <table>
                    <tr>
                        <td>
                            . .
                        </td>
                        <td>
                            . .
                        </td>
                    </tr>
                </table>
                </form>
            </td>
        </tr>
    </tbody>
</table>

---

希望这能解决您的问题。

在twitter引导中，您可以将类容器或容器流体放在表单上，或者只在表单中放一个div标记，这样您就可以轻松地将字段放入行和列中。