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

Question

我正在尝试在 Bootstrap 中构建一个非响应式 表单。

我已按照 Bootstrap 站点上的说明进行操作 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 类。在第二行之前你应该清除 float

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