Bootstrap 3 col-xs и col-md не отвечает

Вы были очень близки в своем первоначальном макете. Единственная проблема, которую я заметил, заключалась в том, что вы продублировали пару классов col-md-* для некоторых ваших элементов <div>:

<div class="form-group col-xs-6 col-sm-4 col-md-2col-md-3 col-lg-2"><label>4/S Couch</label></div>

Заметили, что у вас там col-md-2col-md-3? Это не сработает. Кроме того, в некоторых ваших элементах у родителя <label> есть col-md-2, а у родителя <input> есть col-md-2, а у других есть col-md-3 и col-md-1. Это неравномерно и вызывает проблемы с выравниванием. Я предположил, что col-md-3 и col-md-1 были правильными (если я ошибаюсь, вы всегда можете изменить их на col-md-2 и col-md-2), и отредактировал ваш макет следующим образом:

<div class="container">                   

  <h3>Houseold Inventory</h3>

  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#lounge" data-toggle="tab">Lounge</a></li>
      <li><a href="#dinning" data-toggle="tab">Dinning Room</a></li>
      <li><a href="#householdKitchen" data-toggle="tab">Kitchen</a></li>
      <li><a href="#bed" data-toggle="tab">Bed Room</a></li>
      <li><a href="#study" data-toggle="tab">Study</a></li>
      <li><a href="#householdGarden" data-toggle="tab">Garden</a></li>
      <li><a href="#domestic" data-toggle="tab">Domestic</a></li>
      <li><a href="#householdGarage" data-toggle="tab">Garage</a></li>
      <li><a href="#householdGym" data-toggle="tab">Gym Equipment</a></li>
      <li><a href="#householdMisc" data-toggle="tab">Miscellaneous</a></li>
      <li><a href="#householdBoxes" data-toggle="tab">Boxes</a></li>
      <li><a href="#householdExtra" data-toggle="tab">Extras</a></li>
    </ul> <!-- nav-tabs END-->

    <div class="tab-content">
      <div class="tab-pane active" id="lounge">
        <h4>Lounge</h4>

        <form role="form" class="form-inline">

          <div class="row">
            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Corner Piece</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end corner piece -->

            <div class="clearfix visible-xs-block"></div>

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>4/S Couch</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end 4/S Couch -->

            <div class="clearfix visible-xs-block"></div>

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>3/S Couch</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end 3/S Couch -->

            <div class="clearfix visible-xs-block"></div>

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>2/S Couch</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end 2/S Couch -->

            <div class="clearfix visible-xs-block"></div>

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Armchairs</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end armchairs -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Recliner Chairs</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end recliner chairs -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Riempie Chairs</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end riempie chairs -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Sleeper Couch</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end sleeper couch -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Coffee Table</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end coffee table -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Occ.Table</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end occ table -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hall Stand</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end hall stand -->

            <div class="form-group col-xs-6 col-sm-4 col-md-3 col-lg-2"><label>Hat Stand</label></div>
            <div class="form-group col-xs-6 col-sm-2 col-md-1 col-lg-1">
              <input class="form-control" placeholder="QTY" style="width:60px;" type="text">
            </div><!-- end hat stand -->
          </div><!--end row-->


        </form>
        <div>
        </div> <!--tab-content end-->
      </div> <!--tabbable end-->
      <!-- col-sm-6 END-->

    </div>
  </div>
</div>

Посмотрите этот пример Bootply, чтобы увидеть этот макет в действии (просто измените размер окна браузера).

Ваша структура немного не в порядке. Это должно быть больше похоже на это:

  <form role="form" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">Corner Piece</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
    <!-- end corner piece -->
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">4/S Couch</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
    <!-- end 4/S Couch -->
    <div class="form-group">
        <label class="col-xs-6 col-sm-4 col-md-2 control-label">My Label</label>
        <div class="col-xs-6 col-sm-2 col-md-2 col-lg-1">
            <input type="text" class="form-control" placeholder="QTY">
        </div>
    </div>
</form>

Взгляните на этот пример работы

ХТХ :)

Я понял это.
Почему-то мой CSS-файл Bootstrap не читался правильно, как только я установил пакет NuGet, все было хорошо и хорошо, теперь мой xs и md работают отлично, как и ожидалось.

Спасибо всем, кто помог.