0

我正在使用adminlte3。我想为引导 div 添加自定义装订线宽度。

g-* used to set horizontal and vertical gutter-width with same width.

我已将装订线宽度类添加g-2到主 div 行。但是，水平和垂直的排水沟宽度不一样。当删除 adminlte.min.css 时，排水沟的水平和垂直是相等的。我在添加g-0 class之前尝试过添加，g-2以便它可以重置任何现有宽度。但是，g-2仅适用于垂直宽度。同时，水平宽度大于垂直宽度。然后，我尝试将 .col-* 的 padding-left 和 right 更改为 0px 并添加g-2 class. g-2仅适用于垂直宽度，所有 div 水平连接在一起。如何在 adminlte3 中重置 div gutter-width 并添加自定义水平和垂直 gutter-width？

 gutter-width note:
 in rem
 /*0: 0,g-0
 1: $spacer * .25,
 2: $spacer * .5,
 3: $spacer,
 4: $spacer * 1.5,
 5: $spacer * 3,

 in px     
 0:g-0-->0px
 1:g-1-->4px
 2:g-2-->8px
 3:g-3-->16px
 4:g-4-->24px
 5:g-5-->48px*/

g-2 应该显示 8px 宽度。

$(document).ready(function() {
  elements = $('div.row');
  for (i = 0; i < elements.length; i++) {

    elements[i].classList.add("g-0");
    elements[i].classList.add("g-2");
    //elements[i].classList.add("g-custom");
  }
})
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!--jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--bootstrap-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
  <!--adminlte-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0-rc/css/adminlte.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/3.2.0-rc/js/adminlte.min.js"></script>
  <style>
    /*.g-custom{
                    --bs-gutter-x: 0.5rem;
                    --bs-gutter-y: 0.5rem;
            }
    
    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12,
    .col,
    .col-auto,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm,
    .col-sm-auto,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md,
    .col-md-auto,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg,
    .col-lg-auto,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl,
    .col-xl-auto::before {
      padding-left: 0px;
                padding-right: 0px;*/
    }
  </style>
</head>

<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <div class="content-wrapper">
      <section class="content">
        <div class="container g-0">
          <div class="row">
            <div class="col-sm-8 col-lg-8">
              <div class="p-3 border bg-light">
                COL-1
              </div>
            </div>
            <div class="col-sm-4 col-lg-4">
              <div class="p-3 border bg-light">
                COL-2
              </div>
            </div>
            <div class="col-sm-8 col-lg-8">
              <div class="p-3 border bg-light">
                2nd row COL-1
              </div>
            </div>
            <div class="col-sm-4 col-lg-4">
              <div class="p-3 border bg-light">
                2nd row COL-2
              </div>
            </div>
            <div class="col-sm-5 col-lg-5">
              <div class="row">
                <div class="col-sm-12 col-lg-12">
                  <div class="p-3 border bg-light">
                    3rd row (rowspan-r1) Col-1
                  </div>
                </div>
                <div class="col-sm-12 col-lg-12">
                  <div class="p-3 border bg-light">
                    3rd row (rowspan-r2) Col-1
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-7 col-lg-7">
              <div class="p-3 border bg-light">
                3rd row Col-2
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</body>
</html>

4

0 回答 0