Bootstrap 8 网格系统答案

【问题标题】：Bootstrap 8 grid systemBootstrap 8 网格系统
【发布时间】：2021-04-03 01:12:09
【问题描述】：

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

目的是进行 PMS，有些预订需要跨越一周。

由于我正在使用 Angular 并生成元素，因此引导类对我来说是理想的。

下面的示例不起作用。有任何想法吗？谢谢。

<!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】：

我对你的代码做了一些修正，看看是不是你想要的。

<!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>

【讨论】：

请描述您的解决方法。