Bootstrap5將按鈕附加到畫布抽屜

我正在使用 Bootstrap 5 off-canvas 功能。我正在嘗試將按鈕連接到畫布滑出抽屜的側面。所以當抽屜不在畫布上時，按鈕是可見的。單擊按鈕時，抽屜滑出，但不是將抽屜內容覆寫在按鈕上，按鈕的作用就像它附加到滑出的抽屜一樣并隨之移動。像這樣：

我不確定這是否可能。如果是這樣，我將如何做這件事？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
  </div>
</div>

<div class="container-fluid mt-3">
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
        Open
    </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

uj5u.com熱心網友回復：

當面板打開時，您可以應用帶有過渡的側向平移以匹配側邊欄的平移。我在按鈕周圍使用了一個 div，因為按鈕上已經有了過渡，并且我將其堆疊順序提高到側邊欄蒙版上方。

.offcanvas-btn-box {
  transition: transform .3s ease-in-out; /* same as what's on the panel */
}

.offcanvas.show   div .offcanvas-btn-box {
  transform: translateX(400px);
  position: relative;
  z-index: 1100;
}


/* optional junk to toggle the button text */
.offcanvas-btn-box .btn span:last-child,
.offcanvas.show   div .offcanvas-btn-box .btn span:first-child {
  display: none;
}

.offcanvas.show   div .offcanvas-btn-box .btn span:last-child {
  display: inline;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
  </div>
</div>

<div class="container-fluid mt-3">
  <div class="offcanvas-btn-box">
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
        <span>Open</span><span>Close</span>
    </button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

或者，將按鈕放在面板內并絕對定位。這樣做的好處是不會使您的主頁布局混亂。

.offcanvas-btn {
  left: 420px;
  visibility: visible;
}

/* optional junk to toggle the button text */
.offcanvas-btn span:last-child,
.offcanvas.show .offcanvas-btn span:first-child {
  display: none;
}

.offcanvas.show .offcanvas-btn span:last-child {
  display: inline;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="offcanvas offcanvas-start" id="demo">
  <button class="btn btn-primary offcanvas-btn position-absolute mt-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
        <span>Open</span><span>Close</span>
    </button>

  <div class="offcanvas-header">
    <h1 class="offcanvas-title">Heading</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>Some text lorem ipsum.</p>
  </div>
</div>

<div class="container-fluid mt-4 pt-4">
  Some page content.
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

標籤：推特引导 bootstrap-5

上一篇：使用terraform時的tls未簽名證書

下一篇：拖動時使jQueryUIDraggableCursor在BootstrapModal中居中