33.Bootstrap(中文教程)元件：Dropdown:下拉式选单的变化

ㄧ.下拉式选单的变化

<div class="component" id="demo">  <div class="btn-group dropup" style="position: absolute; bottom: 30%;">    <a href="#" class="btn btn-success">Dropdown</a>    <button class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" data-offset="15">      <span class="sr-only">Dropdown</span>     </button>    <div class="dropdown-menu dropdown-menu-left">      <div class="dropdown-header">Web language</div>      <a href="#" class="dropdown-item">HTML</a>      <a href="#" class="dropdown-item">CSS</a>      <a href="#" class="dropdown-item">JavaScript</a>      <div class="dropdown-divider"></div>      <a href="#" class="dropdown-item">More</a>    </div>  </div></div>.demo.component{  padding: 50px;}

重点：

1.在.btn-group这一层添加.dropup以及style="position: absolute; bottom: 30%;"
2.在.dropdown-menu这层添加.dropdown-menu-left， 左空白对齐
3.data-offset="15"，如果是.dropdown-menu-left则是往左推移

codepen
参考：bootstrap4