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

Question

我试图在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类。 在第二行之前你应该清除浮动

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