如何在引导程序 4 中像行和列一样放置下拉列表 - Html

在Bootstrap 4中，您可以使用下拉列表来呈现多个选项并让用户从中选择一个选项。但是，有时您可能想要将下拉列表与行或列一起使用，以实现更好的布局和外观。本文将介绍如何在Bootstrap 4中像行和列一样放置下拉列表。

嵌套列和行

在Bootstrap 4中，您可以使用嵌套列和行来放置下拉列表。您可以使用以下HTML代码来创建一个嵌套列和行：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Dropdown
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
          <a class="dropdown-item" href="#">Action 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

在上面的代码中，我们使用了Bootstrap的网格系统来创建了一个包含一个下拉列表的列。

左对齐和居中

如果您想要将下拉列表左对齐或居中对齐，您可以使用以下类来实现：

• text-left：将下拉列表左对齐
• text-center：将下拉列表居中对齐

例如，以下是一个左对齐的下拉列表：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="dropdown text-left">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Dropdown
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
          <a class="dropdown-item" href="#">Action 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

以下是一个居中对齐的下拉列表：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="dropdown text-center">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Dropdown
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
          <a class="dropdown-item" href="#">Action 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

右对齐

要将下拉列表右对齐，您需要添加以下CSS样式：

<style>
.dropdown-menu-right {
  right: 0;
  left: auto;
}
</style>

然后，您可以使用以下类将下拉列表右对齐：

• dropdown-menu-right

例如，以下是一个右对齐的下拉列表：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Dropdown
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action 1</a>
          <a class="dropdown-item" href="#">Action 2</a>
          <a class="dropdown-item" href="#">Action 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

结论

现在，您知道如何在Bootstrap 4中像行和列一样放置下拉列表，并且知道如何左对齐、居中、右对齐下拉列表。使用这些技术，您可以创建更好的布局和外观。