bootstrap 3网格系统没有相应地工作答案

【问题标题】：bootstrap 3 grid system not working accordinglybootstrap 3网格系统没有相应地工作
【发布时间】：2020-04-01 03:03:59
【问题描述】：

我正在尝试测试 bootstrap 3 网格系统。连续两列。在手机等超小型设备中，它将堆叠在一列中，而在平板电脑等小型设备中，它将堆叠在两列中。但它不适用于移动设备。在移动设备中，它显示在 2 列中，而它应该显示在 1 列中。我的代码有什么问题吗？谢谢。

   <html>
    <head>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
    <div class="container-fluid">
    <div class="row">
       <div class="col-xs-12 col-sm-6">
          <p>Item 1</p>
       </div>
       <div class="col-xs-12 col-sm-6">
          <p>Item 2</p>
       </div>

    </div>
    </div>
    </body>
    </html>

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

您很接近，但您使用了错误的列大小。

如果您希望列在平板电脑（小型设备）上为 100% 且低于您不应该使用 col-sm-6，因为它仍将在平板电脑上的 2 列上，您应该使用 col-sm-12 或 col-md-6 - col-md-6 是说在桌面（中型）设备上，992px 及以上，该列宽应该是 50%，低于它应该是 100%。

您还可以使用hidden-xs 隐藏手机（超小型“xs”设备）上的所有内容！

所以试试这个代码：

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container-fluid">
            <div class="row ">
                <div class="col-sm-12 col-md-6">
                    <p>Item 1</p>
                </div>
                <div class="col-sm-12 col-md-6">
                    <p>Item 2</p>
                </div>
            </div>
        </div>
    </body>
</html>

同样，我们不需要使用col-sm-12，因为所有低于指定最小尺寸（在本例中为 md-medium）的尺寸都自动 100%，这来自移动优先设计原则。

【讨论】：

我正在使用 jQuery-One-Page-Nav（请参阅github.com/davist11/jQuery-One-Page-Nav）用于平板电脑和桌面视图，它不支持移动视图。因此，我必须在不使用 jQuery-One-Page-Nav 的情况下添加另一个视图，这将在移动视图中得到支持。所以，我会用 hidden-xs 类隐藏它，对吧？对不起，如果我听起来很傻。我是响应式设计领域的新手。您可以查看我的网页，这将使您更好地了解我在说什么：107.180.106.101:8081/home.html。 @Bojan
是的，如果你想在手机上隐藏它，你可以使用hidden-xs。让我知道我的代码是否适用于需要的平板电脑。

【解决方案2】：

hidden-xs 会将小屏幕中的东西隐藏起来。 col-sm-6 将自动将width:100% 用于767px 下方的屏幕；所以.col-xs-12不需要包含。

HTML：

 <div class="container-fluid">
        <div class="row">
           <div class="col-sm-6">
              <p>Item 1</p>
           </div>
           <div class="col-sm-6">
              <p>Item 2</p>
           </div>

        </div>
        </div>

【讨论】：

【解决方案3】：

删除class="hidden-xs" B'因为它在屏幕尺寸超小时隐藏内容。

【讨论】：