对 Bootstrap 非响应式网格系统感到困惑

Question

我正在尝试在引导程序中构建一个非响应式表单。

我已按照引导站点 here 上的说明进行操作

但不是得到这样的东西，

我得到了这个。

有人可以解释发生了什么问题吗？我的理解是我可以创建每个组件并且它们会自动排列内联？但它们是在堆叠？

我的代码如下：我用过haml。

哈姆：

%body
 .container
  .form
   .row
    .col-xs-8.col-xs-offset-2
      %h3 This is a header
      .form-group
        %label.control-label.col-xs-4 Label
        %input.state.col-xs-4.form-control/
        .dropdown.col-xs-4
          .btn.btn-default.dropdown-toggle{"data-toggle" => "dropdown"}
            Button
            %span.caret
      .form-group
        %label.col-xs-4.control-label Another Label
        .col-xs-4
          %input.state.form-control/
        .dropdown.col-xs-2
          .btn.btn-default.dropdown-toggle{"data-toggle" => "dropdown"}
            Another button
            %span.caret

CSS：

.container {
  width: 1440px;
  margin-top: 10px;
  max-width: none !important;
}

Answer 1

同一行中的任何内容都应获得.pull-left 类。 在第二行之前你应该清除浮动

<div class="clearfix"></div>