Runoob Bootstrap 2025 最新版：网格布局实战与交互式示例详解

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    下拉菜单
  button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">菜单项 1a>li>
    <li><a class="dropdown-item" href="#">菜单项 2a>li>
    <li><hr class="dropdown-divider">li>
    <li><a class="dropdown-item" href="#">菜单项 3a>li>
  ul>
div>

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" class="d-block w-100" alt="图片 1">
    div>
    <div class="carousel-item">
      <img src="image2.jpg" class="d-block w-100" alt="图片 2">
    div>
  div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true">span>
    <span class="visually-hidden">上一张span>
  button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true">span>
    <span class="visually-hidden">下一张span>
  button>
div>

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">嵌套列 1div>
        <div class="col-md-6">嵌套列 2div>
      div>
    div>
    <div class="col-md-4">主列内容div>
  div>
div>

@media (min-width: 768px) {
  .custom-class {
    width: 50%;
  }
}