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

Question

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

初始设置:

我使用 Bootstrap v4.0.0-alpha.2然后我撕掉了this simple sidebar .我不确定为什么以及是否相关，但我也设置了 flex: true在我的 _library-variable-overrides.scss (我使用 css-burrito )但由于我只是将其设置为试用，所以我可能可以将其关闭。 ;-)

我想做什么:

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

我的代码是什么样的:

_shell.scss & _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> 来做的 sidenav-nav但我不受此设置的约束。

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

很多!

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

.sidenav-nav {
    height: 100%;
}

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

它非常接近我在桌面浏览器上的目标，但是在 chrome 中点击在手机上显示这个按钮，注销按钮就消失了。

Answer 1

我没有使用过 css-buritto，但你可以考虑给按钮一个类或 id 并传递 position:relative 参数，然后你可以设置一个 bottom: 1em 并且应该将按钮定位在底部。或者，您也可以查看其他位置元素，例如 fixed 也可以解决问题

就像你提到的结束

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