Question

我正在尝试使用bootstrap，因此表单在所有设备中都是响应式的。我添加了bootstrap css和bootstrap js。我试图有一个4列div结构，但数据是2行。我使用了以下代码。

var formTable = "".concat("<div class='container' width='100%'><h2>Raise a New Request</h2><hr/>",
                                      "<br/>",
                                        "<div class='row'>",
                                            "<div class = 'col-sm-3 col-md-3'><label class='control-label'>Request Log Date: </label></div>",
                                            "<div class = 'col-sm-3 col-md-3'>{{Ctrl}}</div>",
                                            "<div class = 'col-sm-3 col-md-3'><label class='control-label'>Number of Requests <em style='color:red'>*</em>: </label></div>",
                                            "<div class = 'col-sm-3 col-md-3'>{{Ctrl}}</div>",
                                        "</div></div>");

如何创建包含4列的结构？感谢

Answer 1

使用Bootstrap V3，您可以使用内联表单，如下所示：

var formTable = "".concat("<form class='form-inline'><h2>Raise a New Request</h2><hr/>",
                                  "<br/>",
                                    "<div class='form-group'>",
                                        "<div class = 'form-group'><label class='control-label'>Request Log Date: </label></div>",
                                        "<div class = 'form-group'>{{Ctrl}}</div>",
                                        "<div class = 'form-group'><label class='control-label'>Number of Requests <em style='color:red'>*</em>: </label></div>",
                                        "<div class = 'form-group'>{{Ctrl}}</div>",
                                    "</div></form>");

以下是有关此功能的更多详细信息：http://getbootstrap.com/css/#forms-inline

在bootstrap中划分4列

1 个答案: