个人中心
gpt4 book ai didi

html - 你如何将网格放在 Bootstrap 的列中？

转载 作者：行者123 更新时间：2023-11-28 02:49:51 24 4
gpt4 key购买 nike

我已阅读文档并观看了一些教程，但无法弄清楚如何准确获得我需要的内容。我会尽力解释。我试图发布屏幕截图，但它说你必须有 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(哈哈)。所以这就是我想要完成的。

手机

enter image description here

桌面

enter image description here

最佳答案

因此，您尝试做的事情是完全可行的 - 而且您正走在正确的轨道上!

使用 bootstrap 时要记住的最重要的事情是将每个“列”都视为一个全新的部分以在其中工作。考虑到这一点，您可以在不同的级别上使用 Bootstrap 进行设计，它通常会按预期工作。

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

  1. 顶级 12 列，无论每列中包含什么
  2. 第 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>

就是这样!你有这个:)

关于html - 你如何将网格放在 Bootstrap 的列中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46721094/

24 4 0
文章推荐： javascript - jQuery 在保持高度和隐藏之前的文本的同时追加文本
文章推荐： javascript - 实时验证字母并对其进行操作
文章推荐： javascript - 您如何创建一个弹出式 html，其中填充了从单独的 Javascript 生成的数据
文章推荐： javascript - 为什么没有调用 "focusin"事件处理程序？