html - Bootstrap 3 col-xs 和 col-md 没有响应

Question

我的 Col-xs 和 col-md 有问题。

所以在我继续生病之前解释我的用途。我正在尝试创建一个用户表单，他们可以在其中输入他们的详细信息，然后输入一件家具的数量。家具部分位于选项卡内容内，因为房屋内有单独的部分。

所以id like for col-xs 跨越2列，一列为label，一列为Quantity输入，然后ill慢慢增加2列，所以sm会显示，label，数量，label数量等等。

col-sm 和 col-lg 工作完美，但 col-xs 和 col-md 不工作，几乎就像他们被跳过一样。请帮忙。

这是我的代码...

	<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">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												<div class="form-group">
													<div class="col-xs-6 col-sm-4 col-md-2"><label>Sleeper couch</label></div>
													<div class="col-xs-6 col-sm-2 col-md-2">
														<input type="text" class="form-control" placeholder="QTY" style="width:60px;" />
													</div>
												<div>
												
                                            </div><!--end row-->
                                        </form>
                                    <div>
                                </div> <!--tab-content end-->
                            </div> <!--tabbable end-->
                        <!-- col-sm-6 END-->
                    
                </div>

我对 Bootstrap 和 Web 布局非常陌生，但欢迎批评。

附言。请原谅布局问题我无法弄清楚为什么代码插入会这样做

pps。检查这个类似的问题对于布局示例： 未回答的问题

pps。这是我的移动问题的图像....

Answer 1

您在初始布局中非常接近。我看到的唯一问题是您在某些元素上复制了几个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-3andcol-md-1是正确的（如果我错了，您可以随时将其更改为col-md-2and 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 示例以查看此布局的实际效果（只需调整浏览器的大小）。

Answer 2

你的结构有点不对劲。它应该更像这样：

  <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>

看看这个功能示例

HTH :)

Answer 3

我已经想通了。
一些我的 Bootstrap css 文件没有被正确读取，一旦我安装了NuGet Package，一切都很好，现在我的xs和md工作正常，符合预期。

感谢所有帮助过的人。