<div class="container">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-lg navbar-light bg-light py-0">
        <a class="navbar-brand p-1" href="#">SAMPLE</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item p-1 active">
              <a class="nav-link" href="#">ホーム</a>
            </li>
            <li class="nav-item dropdown dropdown-hover mega-menu p-1">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                メガメニュー
              </a>
              <div class="dropdown-menu m-0 p-0 rounded-0 shadow-sm" aria-labelledby="navbarDropdown">
                <div class="container bg-white p-4">
                  <div class="row">
                    <div class="col-12">col-12</div>
                  </div>
                  <div class="row">
                    <div class="col-1">col-1</div>
                    <div class="col-11">col-11</div>
                  </div>
                  <div class="row">
                    <div class="col-2">col-2</div>
                    <div class="col-10">col-10</div>
                  </div>
                  <div class="row">
                    <div class="col-3">col-3</div>
                    <div class="col-9">col-9</div>
                  </div>
                  <div class="row">
                    <div class="col-4">col-4</div>
                    <div class="col-8">col-8</div>
                  </div>
                  <div class="row">
                    <div class="col-5">col-5</div>
                    <div class="col-7">col-7</div>
                  </div>
                  <div class="row">
                    <div class="col-6">col-6</div>
                    <div class="col-6">col-6</div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0 p-1">
            <input class="form-control mr-sm-2" type="search" placeholder="キーワード..." aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">検索</button>
          </form>
        </div>
      </nav>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <div class=" bg-light text-dark p-5">
      これは<a href="https://liginc.co.jp/web/design/other-design/86309">メガメニュー</a>のサンプルです。
      </div>
    </div>
  </div>
</div>