English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Grund教程

Bootstrap4 Dropdown-Menü

Wenn der Benutzer den Mauszeiger über den Auslöselement oder darauf klickt, wird in der Regel ein Dropdown-Menü verwendet, um eine Liste mit verwandten Links im Navigationskopf anzuzeigen. Mit dem Bootstrap Dropdown-Plugin können Sie umschaltbare Dropdown-Menüs (d.h. zum Öffnen und Schließen durch Klicken) zu fast jedem Inhalt (wie Links, Buttons oder Button-Gruppen, Navigationsleisten, Tabs und Pillen-Navigation usw.) hinzufügen, ohne JavaScript-Code schreiben zu müssen。

Bootstrap4 Dropdown-Menüs hängen von popper.min.js ab。

Dropdown-Menüs sind umschaltbar und werden als Kontextmenü in Listenform angezeigt, das Links anzeigt。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown-Menü</h2>
　　<p>.dropdown Klasse wird verwendet, um ein Dropdown-Menü zu spezifizieren。</p>
　　<p>.dropdown-menu Klasse, um das tatsächliche Dropdown-Menü zu setzen。</p>
　　<p>Wir können einen Button oder einen Link verwenden, um das Dropdown-Menü zu öffnen, der Button oder der Link muss .dropdown hinzufügen-toggle und data-toggle="dropdown" Eigenschaft。</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown-Taste
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Nach dem Laufergebnis:

Beispielanalyse

.dropdown Klasse wird verwendet, um ein Dropdown-Menü zu spezifizieren。

Wir können einen Button oder einen Link verwenden, um das Dropdown-Menü zu öffnen, der Button oder der Link muss .dropdown hinzufügen-toggle und data-toggle="dropdown" Eigenschaft。

<div> Element hinzufügen .dropdown-menu Klasse, um das tatsächliche Dropdown-Menü zu setzen, und dann in den Auswahlmöglichkeiten des Dropdown-Menüs .dropdown-item Klasse.

Wir können auch im <a> Tag verwenden：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="dropdown">
	　　<a class="btn btn-Sekundär Dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropdown link
	　　</a>
	　　<div　class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a　class="dropdown-item" href="#">Aktion</a>
		<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
		<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
	　　</div>
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Horizontale Trennlinie im Dropdown-Menü

.dropdown-divider Klasse wird verwendet, um eine horizontale Trennlinie im Dropdown-Menü zu erstellen：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>im Dropdown-Menü</h2>
　　<p>.dropdown-divider Klasse wird verwendet, um eine horizontale Trennlinie im Dropdown-Menü zu erstellen：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown-Taste
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<div　class="dropdown-divider"></div>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Titel im Dropdown-Menü

.dropdown-header Klasse wird verwendet, um eine Überschrift im Dropdown-Menü hinzuzufügen：

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>im Dropdown-Menü</h2>
　　<p>.dropdown-header Klasse wird verwendet, um eine Überschrift im Dropdown-Menü hinzuzufügen：</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown-Taste
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　　　<h5　class="dropdown-header">Dropdown header</h5>
　　　　　　<a　class="dropdown-item" href="#">Another link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Verfügbare und deaktivierte Auswahlmöglichkeiten im Dropdown-Menü

.active Klasse lässt die Auswahlmöglichkeiten des Dropdown-Menüs hervorheben (fügt einen blauen Hintergrund hinzu)。

Um die Auswahlmöglichkeiten des Dropdown-Menüs zu deaktivieren, kann die .disabled Klasse verwendet werden。

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown-Menü</h2>
　　<p>.active Klasse lässt die Auswahlmöglichkeiten des Dropdown-Menüs hervorheben (fügt einen blauen Hintergrund hinzu)。</p>
　　<p>Um die Optionen des Dropdown-Menüs zu deaktivieren, kann die Klasse .disabled verwendet werden.</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown-Taste
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item" href="#">Normal</a>
　　　　　　<a　class="dropdown-item active" href="#">Aktiv</a>
　　　　　　<a　class="dropdown-item disabled" href="#">Deaktiviert</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Positionierung des Dropdown-Menüs

Wenn wir das Dropdown-Menü rechts ausrichten möchten, können wir der Elemente .dropdown-menu Klasse hinzufügen .dropdown-menu-right Klasse.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown-Menü</h2>
　　<p>Wenn wir das Dropdown-Menü rechts ausrichten möchten, können wir der Elemente .dropdown-menu Klasse hinzufügen .dropdown-menu-right Klasse.</p>
　　<div class="dropdown">
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle" data-toggle="dropdown">
　　　　　　Dropdown-Taste
　　　　</button>
　　　　<div　class="dropdown-menu dropdown-menu-right">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　3</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Dropdown-Ausrichtung einstellen

Die Standardausrichtung des Dropdown-Menüs ist nach unten, aber wir können auch eine andere Richtung einstellen.

Bestimmen Sie das Dropdown-Menü, das nach rechts auszuwerfen ist

Wenn Sie möchten, dass das Dropdown-Menü nach rechts auszuwerfen, können Sie der div-Element hinzufügen "dropright" Klasse:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2Dropdown-Menü</h2>
　　<p>Die Klasse .dropright wird verwendet, um ein Dropdown-Menü nach rechts auszuwerfen:</p><br>
　　<!--　Standard dropright button　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown-Menü-Links　-->
		<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
　　　　　　　　</div>
	</div>
	<!--　Split dropright button　-->
	<div　class="btn-group dropright">
	　　<button　type="button"　class="btn　btn-sekundär">
		Split dropright
	　　</button>
	　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Schalten Sie Dropright ein</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown-Menü-Links　-->
		　<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
	　　</div>
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Bestimmen Sie das Aufklapp-Menü, das nach oben auszuwerfen ist

Wenn Sie möchten, dass das Aufklapp-Menü nach oben auszuwerfen, können Sie der div-Element hinzufügen "dropup" Klasse:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　　<h2Dropdown-Menü</h2>
　　　　<p>Die Klasse .dropup wird verwendet, um ein Dropdown-Menü nach oben auszuwerfen:</p><br><br><br><br><br><br><br><br>
　　<!--　Standard dropup button　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Dropdown-Menü-Links　-->
　　　　　　　　<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!--　Split dropup button　-->
　　　　<div　class="btn-group dropup">
　　　　<button　type="button"　class="btn　btn-sekundär">
　　　　　　　　Split dropup
　　　　</button>
　　　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Schalten Sie Dropdown ein</span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　　　<!--　Dropdown-Menü-Links　-->
　　　　　　　　<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Bestimmen Sie das Dropdown-Menü, das nach links auszuwerfen ist

Wenn Sie möchten, dass das Dropdown-Menü nach oben auszuwerfen, können Sie der div-Element hinzufügen "dropleft" Klasse:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="text-align:center;">
　　<h2Dropdown-Menü</h2>
　　<p>Die Klasse .dropleft wird verwendet, um ein Dropdown-Menü nach links auszuwerfen:</p><br>
　　<!--　Standard Links-klick-Schaltfläche　-->
	<div　class="btn-gruppe Links-klick">
	　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Links-klick
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown-Menü-Links　-->
		<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
	　　</div>
	</div>
<br><br><br>
	<!--　Getrennter Links-klick-Schaltfläche　-->
	<div　class="btn-gruppe Links-klick">
	　　<button　type="button"　class="btn　btn-sekundär">
		Getrennter Links-klick
	　　</button>
	　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Schalte Links-Klick um</span>
	　　</button>
	　　<div　class="dropdown-menu">
		<!--　Dropdown-Menü-Links　-->
		<a　class="dropdown-item" href="#">Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Eine Andere Aktion</a>
　　　　　　　　<a　class="dropdown-item" href="#">Etwas Anderes Hier</a>
　　　　　　　　<div　class="dropdown-divider"></div>
　　　　　　　　<a　class="dropdown-item" href="#">Getrennter Link</a>
	　　</div>
	</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Dropdown-Menü im Knopf einrichten

Wir können ein Dropdown-Menü im Knopf hinzufügen:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Knopfdrucke Dropdown</h2>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-Primär">Primär</button>
　　　　<button　type="button"　class="btn　btn-Primär Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-Sekundär">Sekundär</button>
　　　　<button　type="button"　class="btn　btn-Sekundär Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-Erfolg">Erfolg</button>
　　　　<button　type="button"　class="btn　btn-Erfolg Dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-info">Info</button>
　　　　<button　type="button"　class="btn　btn-info　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-warning">Warning</button>
　　　　<button　type="button"　class="btn　btn-warning　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
　　<div　class="btn-group">
　　　　<button　type="button"　class="btn　btn-danger">Danger</button>
　　　　<button　type="button"　class="btn　btn-danger　dropdown-toggle　dropdown-toggle-split"　data-toggle="dropdown">
　　　　　　<span　class="caret"></span>
　　　　</button>
　　　　<div　class="dropdown-menu">
　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>
Testen Sie es heraus ‹/›

Nach dem Laufergebnis:

Bootstrap4 KlappeBootstrap4 Karte