부트스트랩 offcanvas

부트스트랩 offcanvas

QA

부트스트랩 offcanvas

답변 1

본문

부트스트랩 예제(https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/)를 보면

아래와 같은 예제가 나오는데요.

 

아래 그림에서 화면의 폭이 좁아지면 toggle버튼이 나타납니다.

그래서 toggle를 클릭하면 offcanvas가 우측에서 나타나는데요...

832838671_1657093719.0603.png

 

아래그림처럼...search부분은 없애고 그 자리에 toggle버튼이 화면의 폭에 상관없이 항상 나타나서 

toggle버튼을 클릭하면 우측에서 offcanvas가 나타나게 할 수는 없는지요.

아무리 해도 되지를 않스니다.

832838671_1657093929.3828.png

 

고수님들의 조언을 부탁드립니다.

 

 

 

소스는 아래와 같습니다.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="">

    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

    <meta name="generator" content="Hugo 0.88.1">

    <title>Offcanvas navbar template · Bootstrap v5.1</title>

 

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/offcanvas-navbar/">

 

   

 

    <!-- Bootstrap core CSS -->

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

 

    <style>

      .bd-placeholder-img {

        font-size: 1.125rem;

        text-anchor: middle;

        -webkit-user-select: none;

        -moz-user-select: none;

        user-select: none;

      }

 

      @media (min-width: 768px) {

        .bd-placeholder-img-lg {

          font-size: 3.5rem;

        }

      }

    </style>

 

   

    <!-- Custom styles for this template -->

    <link href="offcanvas.css" rel="stylesheet">

  </head>

  <body class="bg-light">

   

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">Offcanvas navbar</a>

    <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>

 

    <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

          <a class="nav-link active" aria-current="page" href="#">Dashboard</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Notifications</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Profile</a>

        </li>

        <li class="nav-item">

          <a class="nav-link" href="#">Switch account</a>

        </li>

        <li class="nav-item dropdown">

          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>

          <ul class="dropdown-menu" aria-labelledby="dropdown01">

            <li><a class="dropdown-item" href="#">Action</a></li>

            <li><a class="dropdown-item" href="#">Another action</a></li>

            <li><a class="dropdown-item" href="#">Something else here</a></li>

          </ul>

        </li>

      </ul>

      <form class="d-flex">

        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

        <button class="btn btn-outline-success" type="submit">Search</button>

      </form>

    </div>

  </div>

</nav>





 

    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

 

      <script src="offcanvas.js"></script>

  </body>

</html>

 

#토글 #오프캔버스 #부트스트랩

이 질문에 댓글 쓰기 :

답변 1

야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

218.♡.♡.78

좀 쓸데없는 것들은 생략했으니까 주석을 참고해서 한번 해보세요.

 


<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, 그리고 Bootstrap 기여자들">
<meta name="generator" content="Hugo 0.88.1">
<title>Offcanvas navbar template · Bootstrap v5.1</title>
<link rel="canonical" href="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/">
<link href="https://getbootstrap.kr/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}
/* ============== 새로 추가된 것들 =================== */
/* 버튼이 사라지지 않도록 함 */
.navbar-expand-lg .navbar-toggler {
    display: inline-block !important;
}
/* 오프캔버스 메뉴가 위쪽으로 붙게 함 */
.navbar-expand-lg .navbar-collapse {
    align-items: flex-start !important;
}
/* 오프캔버스 메뉴가 세로로 졍렬되게 함 */
.navbar-expand-lg .navbar-nav {
    flex-direction: column !important;
}
/* 오프캔버스 메뉴의 하단 마진 제거 */
.mb-lg-0 {
    margin-bottom:0 !important;
}
/* 오프캔버스가 항상 오프캔버스인 형태로 유지 */
.offcanvas-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
</style>
<link href="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
        <div class="container-fluid">
            <!-- 브랜드 -->
            <a class="navbar-brand" href="#">Offcanvas navbar</a>
            
            <!-- 기존 숨겨진 햄버거 버튼 위치 / 메뉴 뒤로 이동하도록 함 -->
            <!--
            <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            -->
            <!-- 네비게이션 메뉴 자체가 오프캔버스로 변신하게 되므로, 항상 오프캔버스 형태로 유지한다는 것은 화면이 넓을때 가로로 생겨나는 메뉴는 안쓰겠다는 의미와 같음 -->
            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Notifications</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Switch account</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
                        <ul class="dropdown-menu" aria-labelledby="dropdown01">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 검색창 / 없애버림 -->
                <!--
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
                -->
            </div>
            <!-- 이동한 햄버거 버튼 위치 -->
            <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    
    <div class="nav-scroller bg-body shadow-sm">
        <!-- 내용생략 -->
    </div>
    <main class="container">
        <!-- 내용생략 -->
    </main>
    <script src="https://getbootstrap.kr/docs/5.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/offcanvas.js"></script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 205
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로