Question

我试图测试bootstrap 3网格系统。两列连续。在像手机这样的超小型设备中，它可以堆叠在一个列中，也可以放在像平板电脑这样的小型设备中，它将分为2列。但它在移动设备中没有相应的工作。在移动设备中，它是＆＃39;显示在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>

Answer 1

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>

Answer 2

删除class =“hidden-xs”B'coz当屏幕尺寸超小时隐藏内容。

Answer 3

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

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

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

所以试试这段代码：

<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％，这来自移动优先设计原则。

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

3 个答案:

删除class =“hidden-xs”B'coz当屏幕尺寸超小时隐藏内容。