时间戳

首页 > 解决方案 > 在 bootstrap4 中创建带有拆分按钮的下拉菜单

html - 在 bootstrap4 中创建带有拆分按钮的下拉菜单

问题描述

我想创建带有拆分按钮类的下拉菜单我得到的是下拉菜单而不是下拉菜单。我正在编写以下代码片段。

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
  <br/>
  <div class="dropup">
  <div class="btn-group">
    <button type="button" class="btn btn-primary " >Dropup button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>
</div>

标签： htmlcssbootstrap-4split-button

解决方案

您只需要在“btn-group” div 中添加一个类下拉菜单。请参阅下面更新的 html。

<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br/>
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary " >Dropup button</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split " data-toggle="dropdown">
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
    </div>
</div>

推荐阅读