Question

我无法在图标旁边切换内容，任何人都可以帮助我

<div class="container=fluid">
    <div class="pos-f-t ">
        <div class="collapse " id="navbarToggleExternalContent">

            <ul class="navbar-nav  flex-row-reverse ">
                <li class="nav-item">
                    <a class="nav-link">Right Link 1</a>
                </li>
                <li class="navbar-item">
                    <a class="nav-link">Right Link 2</a>
                </li>
            </ul>
        </div>
        <nav class="navbar navbar-dark bg-dark ">
            <button class="navbar-toggler ml-auto " type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon "></span>
            </button>
        </nav>
    </div>
</div>

Answer 1

html：

<nav class="navbar navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="">demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse bg-dark" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
    </ul>
  </div>
</nav>

css：

.navbar-collapse {
    position: absolute;
    top: 54px;
    left: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    width: 100%;
    transition: all 0.4s ease;
    display: block;
}
.navbar-collapse.collapsing {
    height: auto !important;
    margin-left: 50%;
    left: 50%;
    transition: all 0.2s ease;
}
.navbar-collapse.show {
    left: 0;
}

对其进行测试：https://www.codeply.com/go/yggim0FPTG

如何在icon bootstrap旁边从右到左切换折叠内容4

1 个答案: