Question

我已经阅读了文档并观看了一些教程，但无法弄清楚如何获得我需要的内容。我会尽力解释。我试图发布屏幕截图，但它说你必须有10个声誉。

因此，对于大屏幕，它应该是3行，每行4列。第二行中的第三列应分为另一个与大网格相同的网格，3行，4列。

在移动设备上，它应该是一个大的列，第七个是较小的网格。

这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8'>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">
        <script src="lib/js/jquery-1.11.2.min.js"></script>
        <title>Untable</title>
    </head>
    <body>
      <div class="container"> 
        <h3>Untable</h3>
        <p>Convert this 'table-based' design into a 'responsive bootstrap grid' design.</p>
        <p>Add whatever css and javascript you need to accomplish this.</p>
      </div>

      <div class="container-fluid">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">One</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Two</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Three</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Four</div>
          </div>
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Five</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Six</div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
              <div class="row">
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
              </div>
              <div class="row">
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
              </div>
              <div class="row">
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">One</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Two</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Three</div>
                    <div class="col-xs-3 col-md-3 col-lg-3 col-sm-3">Four</div>
              </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eight</div>
          </div>
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Nine</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Ten</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Eleven</div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">Twelve</div>
          </div>
      </div>
    </body>
    </html>

其他CSS：

 .container-fluid {

    text-align: center;
    border-style: solid;
}

.container {
    text-align: center;
    padding: 5px;
}

编辑：我的声誉现在是10（哈哈）。所以这就是我想要实现的目标。

移动

桌面

Answer 1

所以你想要做的事情是完全可能的 - 而且你正在做正确的事情！

使用bootstrap记住最重要的事情是对待每一个＆＃39; col＆＃39;作为一个全新的部分工作。考虑到这一点，您可以在不同的级别上设计引导程序，它通常可以按预期工作。

因此，在您的情况下，要考虑的两个级别是：

顶级12列，无论每一列
第7栏内的内容

因此，对于1，您已正确接近它！使用您计划在其中作为子元素的最大列数来简单设置行。由于你最大的数字是连续四个，你可以完全做三行，每行四列（完全如你所做）！

对于2，再次，你有正确的方法。您将再次定义三行，包含三列。但是，这次你需要记住你希望那些仍然是xs大小的每行4列配置。就像现在一样，你让它们像顶层列一样重新调整大小，所以当它们在xl屏幕上时，它们每个都是全宽的。相反，只需给第二个元素中的每个列元素一个col-xs-3类。这样，它们将始终以表格形式对齐。你正在寻找 - 即使屏幕尺寸很小。

示例：

<div className="container-fluid">

   <div className="row">
      <div className="col-xs-12 col-md-3">
         One
      </div>
      <div className="col-xs-12 col-md-3">
         Two
      </div>
      <div className="col-xs-12 col-md-3">
         Three
      </div>
      <div className="col-xs-12 col-md-3">
         Four
      </div>
   </div>

   <div className="row">
      <div className="col-xs-12 col-md-3">
         Five
      </div>
      <div className="col-xs-12 col-md-3">
         Six
      </div>
      <div className="col-xs-12 col-md-3">

         <div className="row">
            <div className="col-xs-3">
               Sub One
            </div>
            <div className="col-xs-3">
               Sub Two
            </div>
            <div className="col-xs-3">
               Sub Three
            </div>
            <div className="col-xs-3">
               Sub Four
            </div>
         </div>

         <div className="row">
            <div className="col-xs-3">
               Sub One
            </div>
            <div className="col-xs-3">
               Sub Two
            </div>
            <div className="col-xs-3">
               Sub Three
            </div>
            <div className="col-xs-3">
               Sub Four
            </div>
         </div>

      </div>
      <div className="col-xs-12 col-md-3">
         Eight
      </div>
   </div>

</div>

那就是它！你有这个:)）

如何在引导程序中的列中放置网格？

移动

桌面

1 个答案: