如何使网页标题看起来像引导菜单?

时间:2019-05-08 07:30:40

标签: html css3 bootstrap-4

在我的网页上,我有没有菜单的标题,只有一些信息块和一个按钮。以下是我的标头HTML代码:

<header>
  <div class="row">
    <div class="col-md-2 blkheight mb-4">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="row no-gutters align-items-center">
            <div class="col-md-10">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">24 Hours Transaction</div>
                <div class="h5 mb-0 font-weight-bold text-gray-800" id="24h_transaction">200000</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-1 header-right">
      <a class="active float-right" href="#" data-toggle="modal" data-target="#RulesModal">Rules</a>
    </div>
  </div>

</header>

我想让它像手机屏幕的引导导航栏菜单折叠功能一样。如果存在移动屏幕,请在单击按钮时折叠此标题。这该怎么做? 您可以在https://jsfiddle.net/varshakhandre14/1yzfnLs8/7/

上找到完整的代码

0 个答案:

没有答案