Twitter bootstrap bootstrap 3网格系统无法正常工作_Twitter Bootstrap

Twitter bootstrap bootstrap 3网格系统无法正常工作

twitter-bootstrap

Twitter bootstrap bootstrap 3网格系统无法正常工作,twitter-bootstrap,Twitter Bootstrap,我正在测试Bootstrap3网格系统。一行中有两列。在超小型设备（如手机）中，它将堆叠在一列中，而在平板电脑等小型设备中，它将堆叠在两列中。但在移动设备中，它并没有起到相应的作用。在移动设备中，它显示在2列中，而它应该显示在1列中。我的代码有问题吗？谢谢 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.

我正在测试Bootstrap3网格系统。一行中有两列。在超小型设备（如手机）中，它将堆叠在一列中，而在平板电脑等小型设备中，它将堆叠在两列中。但在移动设备中，它并没有起到相应的作用。在移动设备中，它显示在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>


项目1
项目2

隐藏的xs

将在小屏幕中隐藏内容

col-sm-6

将自动为下面的

767px

屏幕选择

宽度：100%

；因此，

.col-xs-12

不需要包含

HTML:


项目1
项目2

隐藏的xs

将在小屏幕中隐藏内容

col-sm-6

将自动为下面的

767px

屏幕选择

宽度：100%

；因此，

.col-xs-12

不需要包含

HTML:


项目1
项目2

删除

class=“hidden xs”

B'coz它在屏幕尺寸过小时隐藏内容。

删除

class=“hidden xs”

B'coz它在屏幕尺寸过小时隐藏内容。

您很接近，但使用了错误的列尺寸

如果您希望平板电脑（小型设备）和以下设备上的列为100%，则不应使用

col-sm-6

，因为平板电脑上的列仍为2列，您应使用

col-sm-12

，或

col-md-6

col-md-6

表示桌面（中型）设备上992px及以上的列宽应为50%，低于100%

您还可以使用

隐藏的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>


项目1
项目2

同样，我们也不需要使用col-sm-12
，因为所有低于指定最小值（在本例中为md介质）的大小都自动为100%，这是基于移动优先设计原则。
您很接近，但使用了错误的列大小
如果您希望平板电脑（小型设备）和以下设备上的列为100%，则不应使用col-sm-6
，因为平板电脑上的列仍为2列，您应使用col-sm-12
，或col-md-6
-col-md-6
表示桌面（中型）设备上992px及以上的列宽应为50%，低于100%
您还可以使用隐藏的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>


项目1
项目2

同样，我们也不需要使用col-sm-12
，因为所有低于指定最小尺寸（在本例中为md-medium）的尺寸都会自动100%，这来自移动优先设计原则。
我在平板电脑和桌面视图中使用jQuery单页导航（请参阅），它不支持移动视图。因此，我必须添加另一个视图，而不使用jQuery One Page Nav for Nav，这将在mobile view中得到支持。所以，我将通过隐藏xs类来隐藏它，对吗？对不起，如果我听起来很傻的话。我是响应式设计领域的新手。你可以看到我的网页，这会让你更好地了解我在说什么：@BojanYes，如果你想在手机上隐藏它，你可以使用隐藏xs
。让我知道我的代码是否适用于平板电脑。我在平板电脑和桌面视图中使用jQuery单页导航（请参阅），它不支持移动视图。因此，我必须添加另一个视图，而不使用jQuery One Page Nav for Nav，这将在mobile view中得到支持。所以，我将通过隐藏xs类来隐藏它，对吗？对不起，如果我听起来很傻的话。我是响应式设计领域的新手。你可以看到我的网页，这会让你更好地了解我在说什么：@BojanYes，如果你想在手机上隐藏它，你可以使用隐藏xs
。让我知道我的代码是否适用于平板电脑。