问自举8网格系统
EN

Stack Overflow用户

提问于 2021-04-02 16:51:38

回答 1查看 63关注 0票数 0

我需要一个由8列组成的系统，以及一个引导类，使html元素跨越8列网格中的2列或更多。

其目的是制定一个经前管理系统，一些保留需要跨越整个星期。

由于我使用的是角和生成元素，一个引导类对我来说是理想的。

举个例子，它不起作用。有什么想法吗？谢谢。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .col-sm {
      border: 1px solid red;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <h1>8Grid Structure</h1>
   

    <div class="container-fluid">



      <!-- Header -->
      <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm">SEG</div>
        <div class="col-sm">TER</div>
        <div class="col-sm">QUA</div>
        <div class="col-sm">QUI</div>
        <div class="col-sm">SEX</div>
        <div class="col-sm">SAB</div>
        <div class="col-sm">DOM</div>
      </div>


      <div class="row">
        <div class="col-sm"></div>
        <div class="col-sm-3">This column needs to span 3 columns of the 8</div>
        <!--<div class="col-sm">TER</div>-->
        <!--<div class="col-sm">QUA</div>-->
        <div class="col-sm">QUI</div>
        <div class="col-sm">SEX</div>
        <div class="col-sm">SAB</div>
        <div class="col-sm">DOM</div>
      </div>


    </div>
  </div>

</body>

</html>

html

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-02 17:12:09

我在你的代码中做了一些修正，看看是否你想要的。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .col {
      border: 1px solid red;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <h1>8Grid Structure</h1>
   
    <div class="container-fluid">
      <!-- Header -->
      <div class="row">
        <div class="col-sm-2 col"></div>
        <div class="col-sm-1 col">SEG</div>
        <div class="col-sm-1 col">TER</div>
        <div class="col-sm-1 col">QUA</div>
        <div class="col-sm-1 col">QUI</div>
        <div class="col-sm-1 col">SEX</div>
        <div class="col-sm-1 col">SAB</div>
        <div class="col-sm-1 col">DOM</div>
        <div class="col-sm-2 col"></div>
      </div>

      <div class="row">
        <div class="col-sm-2 col"></div>
        <div class="col-sm-3 col">This column needs to span 3 columns of the 8</div>
        <div class="col-sm-1 col">QUI</div>
        <div class="col-sm-1 col">SEX</div>
        <div class="col-sm-1 col">SAB</div>
        <div class="col-sm-1 col">DOM</div>
        <div class="col-sm-2 col"></div>
      </div>
    </div>
  </div>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66922591

复制

相似问题

问自举8网格系统
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举8网格系统EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举8网格系统
EN