1

I'm trying to build a non-responsive form in bootstrap.

I've followed the instructions on the bootstrap site here

But instead of getting something like this,

RESULT

I'm getting this instead.

problem

Can someone explain what's going wrong? My understanding is that I can create each component and that they automatically line-up inline? But they're stacking instead?

My code is below: I've used haml.

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;
}
Sri
  • 35
  • 5

1 Answers1

0

anything within the same line should get a .pull-left class. before the second line you should clear floats

<div class="clearfix"></div>
lonewolf217
  • 611
  • 4
  • 10