iT邦幫忙

1

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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言