html - 对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;
}

最佳答案

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

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

关于html - 对Bootstrap无响应网格系统感到困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25485069/