Question

我的问题实际上比标题更复杂，但我无法想出更好的标题。

初始设置：

我使用Bootstrap v4.0.0-alpha.2并且我删除了this simple sidebar。我不确定为什么以及它是否相关，但我也在flex: true设置_library-variable-overrides.scss（我使用css-burrito），但因为我只是设置它来尝试它出去，我可以把它关掉。 ; - ）

我想做什么：

我想在侧边栏中有一个底部对齐的按钮。理想情况下，它在侧边栏中水平居中，底部有大约1em个边距。

我的代码是什么样的：

_shell.scss＆amp; _sidenav.scss：

#shell-wrapper {
    padding-left: 0;
    transition: all 0.5s ease;
}

#shell-wrapper.toggled {
    padding-left: 250px;

    #shell-content-wrapper {
        position: absolute;
        margin-right: -250px;
    }
}

@media(min-width:768px) {
    #shell-wrapper {
        padding-left: 250px;
    }

    #shell-wrapper.toggled {
        padding-left: 0;

        #shell-content-wrapper {
            position: relative;
            margin-right: 0;
        }
    }

    #shell-content-wrapper {
        padding: 20px;
        position: relative;
    }
}


#sidenav-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    transition: all 0.5s ease;
}

#shell-wrapper.toggled { 
    #sidenav-wrapper {
        width: 250px;
    }
}

#shell-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

/* Sidenav Styles */

.sidenav-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;

    li {
        text-indent: 20px;
        line-height: 40px;

        a {
            display: block;
            text-decoration: none;
            color: #999999;
        }

        a:hover {
            text-decoration: none;
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
        }

        a:active, a:focus {
            text-decoration: none;
        }
    }

    >.sidenav-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;

        a {
            color: #999999;
        }

        a:hover {
            color: #fff;
            background: none;
        }
    }
}

@media(min-width:768px) {
    #sidenav-wrapper {
        width: 250px;
    }

    #shell-wrapper.toggled #sidenav-wrapper {
        width: 0;
    }

}

和index.html：

<div id="shell-wrapper" class="toggled">
  <div id="sidenav-wrapper">
    <ul class="sidenav-nav">
      <li class="sidenav-brand">
        <a href="#">Brand</a>
      </li>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>
        <a href="#">Item 2</a>
      </li>
      <li id="logout">
        <button class="btn btn-danger-outline">Logout</button>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button">
    &#9776;
  </button>
  <div id="shell-content-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <!--Main Content Here-->
        </div>
      </div>
    </div>
  </div>
</div>

退出按钮是有问题的。我只是尝试将其作为<li>的{{1}}，但我并不依赖此设置。

到目前为止我尝试了什么：

很多！

最接近我想要的是添加这个：

sidenav-nav

它非常接近我在桌面浏览器上的目标，但点击在Chrome上的电话按钮上显示此信息，退出按钮就消失了。

Answer 1

我没有使用css-buritto，但你可以考虑给按钮一个类或id并传递位置：相对参数然后你可以设置一个底部：1em并且应该将按钮放在底部。另外，您还可以查看其他位置元素，如固定，也可以做到这一点

像你提到的那样结束

#logout {
    position: relative;
    bottom: 1em;
}

如何底部对齐bootstrap 4中的按钮？

初始设置：

我想做什么：

我的代码是什么样的：

到目前为止我尝试了什么：

1 个答案: