引导填充不起作用

Question

我已正确导入我的引导文件，它似乎可以正常工作，因为行和列似乎可以正常工作。

但是，我有一个使用表单的文件：

.container
    .row
        .col-x-12.col-md-6
            form.form-horizontal(action="/location", method="get", role="form")

                .form-group
                    label.col-xs-10.col-sm-2.control-label(for="name") name
                    .col.xs-12.col-sm-10
                        input#name.form-control(name="name")

                .form-group
                    label.col-xs-10.col-sm-2.control-label(for="rating") rating
                    .col-xs-12.col-sm-10
                        select#rating.form-control.input-sm(name="rating")
                            option 1
                            option 2
                            option 3
                            option 4
                            option 5

                .form-group
                    label.col-xs-12.col-sm-2.control-label(for="review") review
                    .col-xs-12.col-sm-10
                        textarea#review.form-control(name="review", rows="5")

                button.btn.btn-default.pull-right Add my review

为此的填充似乎不起作用。不同的表格组没有间隔开。此外，“添加评论”按钮不会拉到右侧。

建议？

Answer 1

您的第一个.col-x-12.col-md-6 缺少一个“s”。对于初学者，这应该是.col-xs-12.col-md-6。例如，您可以使用col-xs-offset-1 来指定表单元素间距。

Answer 2

首先检查HTML结构是否正确。如果您使用的是自定义样式 CSS，请将其删除并检查问题是否仍然存在。最后分享整个 HTML 以进一步查看。

Answer 3

使用 .form-group 类添加 .row 类。