search

Hướng dẫn dropdown menu right not working bootstrap 5 - menu thả xuống bên phải không hoạt động bootstrap 5

Ngày đăng: 20/11/2022
Trả lời: 0
Lượt xem: 110

Tôi có một chiếc Bootstrap 5 Navbar mặc định, nhưng khi tôi cố gắng thả xuống bên phải, danh sách các mục thả xuống ra khỏi màn hình bên phải. Điều này https://ibb.co/jf3ghfk.

Show

Tôi đã thử giải pháp được đưa ra cho người khác, ví dụ: Bootstrap 4: Menu thả xuống sẽ tắt bên phải màn hình

Và đây: Bootstrap: Vị trí của menu thả xuống liên quan đến mục Navbar

.

Đây là những gì không hoạt động tốt:

Và đây là mã Navbar của tôi:

Regards.

Tổng quan

Dropdowns có thể bật, lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và nhiều hơn nữa. Họ đã thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Họ đã chuyển đổi bằng cách nhấp vào, không phải bằng cách lơ lửng; Đây là một quyết định thiết kế có chủ ý.

Các thả xuống được xây dựng trên thư viện bên thứ ba, Popper, cung cấp định vị động và phát hiện chế độ xem. Hãy chắc chắn bao gồm popper.min.js trước bootstrap từ javascript hoặc sử dụng 

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
6 / 
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
7 có chứa popper. Popper isn được sử dụng để định vị các thả xuống ở Navbars mặc dù định vị động là không cần thiết.

Khả năng tiếp cận

Tiêu chuẩn WAI ARIA xác định một tiện ích 

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
8 thực tế, nhưng điều này là cụ thể cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và các menu phụ.

Mặt khác, thả xuống Bootstrap, được thiết kế chung chung và áp dụng cho nhiều tình huống và cấu trúc đánh dấu. Chẳng hạn, có thể tạo các thả xuống có chứa các đầu vào và điều khiển hình thức bổ sung, chẳng hạn như các trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng không tự động thêm) bất kỳ thuộc tính 

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
9 và 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
0 cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải bao gồm các thuộc tính cụ thể hơn này.

Tuy nhiên, Bootstrap thực hiện hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các phần tử 


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
1 riêng lẻ bằng cách sử dụng các phím con trỏ và đóng menu với phím ESC.

Ví dụ

Bao bọc chuyển đổi thả xuống (nút hoặc liên kết của bạn) và menu thả xuống trong 


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 hoặc một phần tử khác khai báo 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
3. Các thả xuống có thể được kích hoạt từ các yếu tố 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4 hoặc 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
5 để phù hợp hơn với nhu cầu tiềm năng của bạn. Các ví dụ được hiển thị ở đây sử dụng các yếu tố 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
6 ngữ nghĩa khi thích hợp, nhưng đánh dấu tùy chỉnh được hỗ trợ.

Nút đơn

Bất kỳ 


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
7 nào cũng có thể được biến thành một chuyển đổi thả xuống với một số thay đổi đánh dấu. Tại đây, cách bạn có thể đưa chúng vào làm việc với các yếu tố 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
5:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>

Và với các yếu tố 


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>

Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào:


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

Nút chia

Tương tự, tạo các thả xuống nút phân chia với gần như đánh dấu giống như các thả xuống nút đơn, nhưng với việc bổ sung 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
0 cho khoảng cách thích hợp xung quanh Caret thả xuống.

Chúng tôi sử dụng lớp bổ sung này để giảm 25% theo chiều ngang 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
1 ở hai bên của CARET và loại bỏ 

<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 mà đã thêm vào để thả xuống nút thông thường. Những thay đổi bổ sung đó giữ cho Caret tập trung vào nút phân chia và cung cấp một khu vực nhấn có kích thước phù hợp hơn bên cạnh nút chính.


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

Kích thước

Dropdown Nút hoạt động với các nút thuộc mọi kích cỡ, bao gồm các nút thả xuống mặc định và phân chia.


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>


<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>

Thả xuống tối

Chọn tham gia các thả xuống tối hơn để phù hợp với phong cách hải quân tối hoặc kiểu tùy chỉnh bằng cách thêm 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
3 vào 

<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4 hiện có. Không có thay đổi được yêu cầu đối với các mục thả xuống.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>

Và đặt nó vào sử dụng trong một chiếc thuyền nang:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>

Hướng

RTL

Các hướng được nhân đôi khi sử dụng bootstrap trong RTL, có nghĩa là 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
5 sẽ xuất hiện ở phía bên phải.

Thả xuống

Các menu thả xuống kích hoạt các phần tử trên bằng cách thêm 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
6 vào phần tử cha.

0

Thả

Các menu thả xuống kích hoạt ở bên phải của các phần tử bằng cách thêm 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
7 vào phần tử cha.

1

Dropleft

Các menu thả xuống kích hoạt ở bên trái của các phần tử bằng cách thêm 


<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
5 vào phần tử cha.

2

Bạn có thể sử dụng các yếu tố 


<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4 hoặc 

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
    Action
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
5 làm mục thả xuống.

3

Bạn cũng có thể tạo các mục thả xuống không tương tác với 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
1. Hãy thoải mái tạo kiểu hơn với CSS tùy chỉnh hoặc các tiện ích văn bản.

4

Tích cực

Thêm 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
2 vào các mục trong bản thả xuống để tạo kiểu chúng là hoạt động. Để truyền tải trạng thái hoạt động để hỗ trợ các công nghệ, hãy sử dụng thuộc tính 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
3 - sử dụng giá trị 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
4 cho trang hiện tại hoặc 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
5 cho mục hiện tại trong một tập hợp.style them as active. To convey the active state to assistive technologies, use the 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
3 attribute — using the 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
4 value for the current page, or 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
5 for the current item in a set.

5

Vô hiệu hóa

Thêm 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
6 vào các mục trong danh sách thả xuống để tạo kiểu chúng là vô hiệu hóa.style them as disabled.

6

Theo mặc định, một menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của cha mẹ. Bạn có thể thay đổi điều này với các lớp 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
7 định hướng, nhưng bạn cũng có thể kiểm soát chúng với các lớp sửa đổi bổ sung.

Thêm 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8 vào 

<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4 để căn chỉnh menu thả xuống. Các hướng được nhân đôi khi sử dụng bootstrap trong RTL, có nghĩa là 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8 sẽ xuất hiện ở phía bên trái.

Đứng lên! Các thả xuống được định vị nhờ Popper ngoại trừ khi chúng được chứa trong một chiếc Navbar. Dropdowns are positioned thanks to Popper except when they are contained in a navbar.

7

Liên kết đáp ứng

Nếu bạn muốn sử dụng căn chỉnh đáp ứng, vô hiệu hóa định vị động bằng cách thêm thuộc tính 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
1 và sử dụng các lớp biến thể đáp ứng.

Để sắp xếp đúng menu thả xuống với điểm dừng đã cho hoặc lớn hơn, thêm 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
2.right the dropdown menu with the given breakpoint or larger, add 
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
2.

8

Để căn chỉnh bên trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, thêm 


<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8 và 
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
4.left the dropdown menu with the given breakpoint or larger, add 

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8 and 
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
4.

9

Lưu ý rằng bạn không cần thêm thuộc tính 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
1 vào các nút thả xuống trong Navbars, vì Popper isn không được sử dụng trong Navbars.

Tùy chọn căn chỉnh

Lấy hầu hết các tùy chọn được hiển thị ở trên, ở đây, một bản demo bồn rửa nhà bếp nhỏ của các tùy chọn liên kết thả xuống khác nhau ở một nơi.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
0

Nội dung menu

Thêm một tiêu đề vào các phần của các phần hành động trong bất kỳ menu thả xuống nào.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
1

Vách ngăn

Các nhóm các mục menu liên quan với một bộ chia.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
2

Chữ

Đặt bất kỳ văn bản miễn phí nào trong menu thả xuống với văn bản và sử dụng các tiện ích khoảng cách. Lưu ý rằng bạn có thể cần các kiểu kích thước bổ sung để hạn chế chiều rộng menu.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
3

Các hình thức

Đặt một biểu mẫu trong menu thả xuống, hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc phần đệm để cung cấp cho nó không gian âm bạn yêu cầu.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
4

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
5

Tùy chọn thả xuống

Sử dụng 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
6 hoặc 
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
7 để thay đổi vị trí của thả xuống.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
6

Tự động đóng hành vi

Theo mặc định, menu thả xuống được đóng khi nhấp vào bên trong hoặc bên ngoài menu thả xuống. Bạn có thể sử dụng tùy chọn 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8 để thay đổi hành vi thả xuống này.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
7

Sass

Biến

Biến cho tất cả các thả xuống:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
8

Các biến cho Dark Dropdown:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
9

Các biến cho các chất làm thân dựa trên CSS cho thấy tính tương tác của Dropdown:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
0

Mixins

Mixin được sử dụng để tạo ra các chất làm thân dựa trên CSS và có thể được tìm thấy trong 

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
9.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
1

Cách sử dụng

Thông qua các thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống bật nội dung ẩn (menu thả xuống) bằng cách chuyển lớp 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
0 trên cha mẹ 

<div class="btn-group">
  <button type="button" class="btn btn-danger">Actionbutton>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4. Thuộc tính 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 được dựa vào để đóng các menu thả xuống ở cấp độ ứng dụng, do đó, một ý tưởng tốt là luôn luôn sử dụng nó.

Trên các thiết bị hỗ trợ cảm ứng, việc mở một thả xuống thêm các trình xử lý 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
3 trống cho trẻ em ngay lập tức của yếu tố 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
4. Việc hack xấu xí này phải thừa nhận là cần thiết để làm việc xung quanh một sự giải quyết trong phái đoàn sự kiện của iOS, điều này sẽ ngăn chặn một cú chạm ở bất cứ nơi nào bên ngoài việc thả xuống khi kích hoạt mã đóng lại thả xuống. Sau khi thả xuống, các trình xử lý 
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
3 trống bổ sung này được gỡ bỏ.

Thông qua các thuộc tính dữ liệu

Thêm 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 vào một liên kết hoặc nút để chuyển một thả xuống.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
2

Thông qua JavaScript

Gọi các thả xuống qua JavaScript:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
3

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 vẫn được yêu cầu

Bất kể bạn có gọi cho thả xuống qua JavaScript hay thay vào đó sử dụng Data-API, 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
2 luôn được yêu cầu phải có mặt trên phần tử kích hoạt thả xuống.

Tùy chọn

Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item active" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">Separated linka>li>
  ul>
div>
9, như trong 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
0. Đảm bảo thay đổi loại trường hợp của tên tùy chọn từ Camelcase sang trường hợp kebab khi chuyển các tùy chọn thông qua các thuộc tính dữ liệu. Ví dụ: thay vì sử dụng 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
1, sử dụng 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
2.

TênLoại hìnhMặc địnhSự mô tả
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
3		Chuỗi | yếu tố
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
4		Ranh giới ràng buộc tràn của menu thả xuống (chỉ áp dụng cho công cụ sửa đổi phòng ngừa của Popper). Theo mặc định, đó là 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
4 và có thể chấp nhận tham chiếu htmlelement (chỉ thông qua JavaScript). Để biết thêm thông tin, hãy tham khảo các tài liệu phát hiện của Popper.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
6		Chuỗi | yếu tố | sự vật
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
7		Yếu tố tham chiếu của menu thả xuống. Chấp nhận các giá trị của 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
7, 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbara>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">span>
    button>
    <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Actiona>li>
            <li><a class="dropdown-item" href="#">Another actiona>li>
            <li><a class="dropdown-item" href="#">Something else herea>li>
          ul>
        li>
      ul>
    div>
  div>
nav>
9, tham chiếu htmlelement hoặc một đối tượng cung cấp
00. Để biết thêm thông tin, hãy tham khảo các tài liệu xây dựng của Popper và tài liệu phần tử ảo.
01		sợi dây
02		Theo mặc định, chúng tôi sử dụng popper để định vị động. Vô hiệu hóa điều này với
03.
04		Mảng | Chuỗi | hàm số
05

Bù đắp cho thả xuống so với mục tiêu của nó. Bạn có thể truyền một chuỗi trong các thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như:

06

Khi một hàm được sử dụng để xác định phần bù, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper là đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được truyền dưới dạng đối số thứ hai. Hàm phải trả về một mảng với hai số:

07.

Để biết thêm thông tin, hãy tham khảo các tài liệu bù của Popper.

<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Small button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
8		Boolean | sợi dây

<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Large button
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdownspan>
  button>
  <ul class="dropdown-menu">
    ...
  ul>
div>
5

Định cấu hình hành vi đóng tự động của thả xuống:

16		null | đối tượng | hàm số
17

Để thay đổi cấu hình popper mặc định của Bootstrap, hãy xem cấu hình của Popper.

Khi một hàm được sử dụng để tạo cấu hình popper, nó được gọi với một đối tượng chứa cấu hình popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho popper.

Sử dụng chức năng với
16

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
4

Phương pháp

Phương phápSự mô tả
13		 Bật menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng được xếp hạng.
20		 Hiển thị menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
12		 Ẩn menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
22		 Cập nhật vị trí của một phần tử thả xuống.
23		 Phá hủy một yếu tố thả xuống. (Xóa dữ liệu được lưu trữ trên phần tử DOM)
24		 Phương thức tĩnh cho phép bạn có được thể hiện thả xuống được liên kết với phần tử DOM, bạn có thể sử dụng nó như thế này:
25
26		 Phương thức tĩnh trả về một thể hiện thả xuống được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này:
27

Sự kiện

Tất cả các sự kiện thả xuống được bắn vào phần tử chuyển đổi và sau đó sủi bọt. Vì vậy, bạn cũng có thể thêm người nghe sự kiện vào phần tử cha mẹ ____ 54. Các sự kiện

29 và
30 có thuộc tính
31 (chỉ khi loại sự kiện ban đầu là
32) chứa một đối tượng sự kiện cho sự kiện nhấp chuột.

Phương phápSự mô tả
13		 Bật menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng được xếp hạng.
20		 Hiển thị menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
12		 Ẩn menu thả xuống của một chiếc Navbar đã cho hoặc điều hướng tab.
22		 Cập nhật vị trí của một phần tử thả xuống.

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Actiona>li>
    <li><a class="dropdown-item" href="#">Another actiona>li>
    <li><a class="dropdown-item" href="#">Something else herea>li>
  ul>
div>
5

Tại sao menu thả xuống của tôi không hoạt động bootstrap?

Tại sao menu thả xuống của tôi không hoạt động trong bootstrap? Giải pháp: Dropdown nên được chuyển đổi thông qua các thuộc tính dữ liệu hoặc sử dụng JavaScript. Trong chương trình trên, chúng tôi đã quên thêm một thuộc tính dữ liệu để việc thả xuống không hoạt động. Vì vậy, thêm dữ liệu-bs-toggle = "thả xuống" để chuyển đổi danh sách thả xuống.The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

Làm thế nào căn chỉnh thực đơn thả xuống trong trung tâm bootstrap?

Nút thả xuống có thể được định vị ở trung tâm của trang bằng cách đặt thuộc tính văn bản-align của DIV DIV của DROD DIV thành trung tâm.Ví dụ sau đây chứa một menu thả xuống Bootstrap đơn giản với một lớp được thêm vào lớp tôi.Tài sản của văn bản-Align: Trung tâm được thêm vào lớp.setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.

Lớp nào chỉ ra một menu thả xuống trong bootstrap?

Lớp .Dropdown chỉ ra một menu thả xuống.Để mở menu thả xuống, sử dụng nút hoặc liên kết với một lớp .Dropdown-toggle và thuộc tính Data-Toggle = "Dropdown"..dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

Làm thế nào chúng ta có thể ẩn biểu tượng mũi tên khỏi bootstrap thả xuống?

Mỗi nút hoặc liên kết thả xuống Bootstrap đều có :: Sau khi chọn trong CSS.:: Sau khi bộ chọn thường được sử dụng để chèn một số văn bản sau nội dung của phần tử.Trong trường hợp này, nội dung là một mũi tên thả xuống.Để loại bỏ nó, chỉ cần làm cho nội dung đi 'không'.Người ta có thể sử dụng tính năng này để tạo các menu điều hướng trong các Navbars hàng đầu.make the content go 'none'. One can use this feature to create navigation menus in top navbars.

programming bootstrap Bootstrap dropdown menu Bootstrap download React-bootstrap/Dropdown

Bài Viết Liên Quan

Ninh thuận làm gì để phát triển văn hóa chăm năm 2024
Ninh thuận làm gì để phát triển văn hóa chăm năm 2024

mẹo hay
Ngành kỹ thuật vật liệu là gì năm 2024
Ngành kỹ thuật vật liệu là gì năm 2024

là ai Hỏi Đáp Là gì
Sữa lỗi trình duyệt không xem video được năm 2024
Sữa lỗi trình duyệt không xem video được năm 2024

mẹo hay
Bài tập trắc nghiệm về chương trình con 11 năm 2024
Bài tập trắc nghiệm về chương trình con 11 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Cách lưu văn bản dưới file pdf của work 2003 năm 2024
Cách lưu văn bản dưới file pdf của work 2003 năm 2024

mẹo hay Mẹo Hay Cách Công Nghệ File
C w trong hợp đồng thương mại là gì năm 2024
C w trong hợp đồng thương mại là gì năm 2024

là ai Hỏi Đáp Là gì Cw là gì
Bài tập phát triển tư dy logic nguoi lon năm 2024
Bài tập phát triển tư dy logic nguoi lon năm 2024

mẹo hay Khỏe Đẹp Bài tập
Lỗi error establishing a database connection trong wordpress trên ubuntu năm 2024
Lỗi error establishing a database connection trong wordpress trên ubuntu năm 2024

mẹo hay cPanel Localhost wordpress/wp-admin
Họ đặng là dân tộc gì năm 2024
Họ đặng là dân tộc gì năm 2024

là ai họ đặng Hơn
Bài giải toán lớp 5 bài luyện tập tuần 22 năm 2024
Bài giải toán lớp 5 bài luyện tập tuần 22 năm 2024

mẹo hay
Cho thuê chung cư mini phạm văn đồng hcm năm 2024
Cho thuê chung cư mini phạm văn đồng hcm năm 2024

mẹo hay
Bài tập tiếng việt lớp 3 tuần 4 trang 15 năm 2024
Bài tập tiếng việt lớp 3 tuần 4 trang 15 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Viết chữ in hoa là gì năm 2024
Viết chữ in hoa là gì năm 2024

là ai Hỏi Đáp Là gì
Bắt người trong trường hợp khẩn cấp là gì năm 2024
Bắt người trong trường hợp khẩn cấp là gì năm 2024

là ai Hỏi Đáp Là gì
Giao án điện tử bài tập tỉ số lượng giác năm 2024
Giao án điện tử bài tập tỉ số lượng giác năm 2024

mẹo hay Khỏe Đẹp Bài tập
Bài 25 trang 21 sgk toán 10 nâng cao năm 2024
Bài 25 trang 21 sgk toán 10 nâng cao năm 2024

mẹo hay
Phát biểu nào sau đây là đúng tin học năm 2024
Phát biểu nào sau đây là đúng tin học năm 2024

mẹo hay Học Tốt Học
Trầu têm cánh phượng là gì năm 2024
Trầu têm cánh phượng là gì năm 2024

là ai Hỏi Đáp Là gì
Cầu rồng ở đà nẵng bắc qua sông nào năm 2024
Cầu rồng ở đà nẵng bắc qua sông nào năm 2024

mẹo hay
Giải vở bài tập lịch sử 6 bài 16 năm 2024
Giải vở bài tập lịch sử 6 bài 16 năm 2024

mẹo hay Khỏe Đẹp Bài tập

Quảng Cáo

Có thể bạn quan tâm

Put wool over other peoples eyes là gì năm 2024
1 ngày trước . bởi DummyCulprit
Ngày thứ 2 của vòng kinh tính như thế nào năm 2024
1 ngày trước . bởi BurnishedPanther
Ghi nhận hóa đơn điều chỉnh giảm chi phí năm 2024
1 ngày trước . bởi SunnyLikeness
Cv kế toán song ngữ bằng tiếng anh năm 2024
1 ngày trước . bởi CripplingDistributor
Số phát hành thẻ hsbc là gì năm 2024
1 ngày trước . bởi EchoingHumility
Làm thế nào để tóc nhanh dài và dày hơn năm 2024
1 ngày trước . bởi StuckStoryteller
Nhiễm điện do hưởng ứng là gì năm 2024
1 ngày trước . bởi HourlyServitude
Kem dưỡng choống lão hóa perricone md high potency năm 2024
1 ngày trước . bởi White-collarArrow
Các chỉ số trung bình ngành dệt may năm 2024
1 ngày trước . bởi Man-madeAppointment
Vé máy bay cam ranh đi thanh hóa năm 2024
1 ngày trước . bởi FortifiedSaloon

Toplist được quan tâm

#1
Top 7 tết mậu thân năm 1968 đã diễn ra sự kiện gì ở miền nam nước ta 2023
5 tháng trước
#2
Top 13 luyện từ và câu: dấu gạch ngang lớp 4 trang 45 2023
5 tháng trước
#3
Top 6 trong mặt phẳng oxy ảnh của đường thẳng d 3x y 4=0 2023
5 tháng trước
#4
Top 6 thử thách thần chết thuyết minh phần 2 2023
5 tháng trước
#5
Top 4 vở bài tập tiếng việt lớp 3 tập 2 chính tả trang 15 2023
5 tháng trước
#6
Top 5 áo khoác nam quảng châu cao cấp 2023
5 tháng trước
#7
Top 4 nội dung nào sau đây không phải là trách nhiệm của đơn vị đầu mối cung cấp thông tin 2023
5 tháng trước
#8
Top 9 mẫu đồng phục công sở đẹp 2022 2023
5 tháng trước
#9
Top 5 ốp lưng iphone 13 pro bảo vệ camera 2023
5 tháng trước

Quảng cáo

Xem Nhiều

Bài tập có lời giải tổ chức thi công năm 2024
1 tuần trước . bởi VolubleBrowsing
Last seen recently nghĩa là gì năm 2024
5 ngày trước . bởi High-levelRelaxation
Dđiện trở các cặp dây máy nén là bao nhiêu năm 2024
1 tuần trước . bởi TelevisedNarration
Vietnam airline được ký gửi bao nhiêu kg năm 2024
6 ngày trước . bởi ProlongedSeating
Bước giá trong chứng khoán là gì năm 2024
1 tuần trước . bởi Run-downRecreation
Cấu trúc so sánh gấp bao nhiêu lần năm 2024
1 tuần trước . bởi WeeFeedback
Eé máy bay từ pháp về vn bao nhiêu năm 2024
1 tuần trước . bởi EvolutionaryCloseness
Bài văn viết về sở thích bằng tiếng anh năm 2024
2 ngày trước . bởi SucceedingSubcommittee
Bê tông thương phẩm mác 250 là gì năm 2024
2 ngày trước . bởi AttentivePrivacy
Tuổi tân mùi hợp tuổi nào mở hàng khai trương năm 2024
14 giờ trước . bởi PatrioticBonding

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 boxhoidap.com Inc.