Bootstrap填充不起作用

Question

我已经正确导入了我的bootstrap文件，它似乎正在工作，因为行和列似乎正在工作。

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

.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

这个填充似乎不起作用。不同的表格组不是分开的。此外，＆＃34;添加评论＆＃34;按钮不会向右拉。

建议？

Answer 1

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

Answer 2

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

Answer 3

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