在 bootstrap 4 中使用拆分按钮创建下拉菜单

Question

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

<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>

Answer 1

您只需要在您的“btn-group”div 中添加一个 class dropup。请参阅下面更新的 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>

在 bootstrap 4 中使用拆分按钮创建下拉菜单

to create drop up menu with split button in bootstrap4

html

css

split-button

bootstrap-4