如何使下拉菜单水平显示而不是垂直显示？

Question

我目前正在学习使用HTML5，CSS，Bootstrap和JavaScript开发网站。 如何显示这些按钮以水平显示而不是垂直显示？我希望它们显示在“快速购买”下方的中间，按钮之间要有适当的间距。

这是我的代码的某些部分：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

Answer 1

将那些 li 放入一个 ul 列表中，并将该类作为 list-inline

<ul class="dropdown-menu">
                <ul class='list-inline'>
                    <li><a href="#" id="">1</a>
                    </li>
                    <li><a href="#" id="">2</a>
                    </li>
                    <li><a href="#" id="">3</a>
                    </li>
                    <li><a href="#" id="">4</a>
                    </li>
                    <li><a href="#" id="">5</a>
                    </li>
                </ul>
</ul>

这将水平添加下拉列表。 Bootstrap具有一些默认样式，可以像

.dropdown-menu{
min-width: 200px;
}

如果您认为它会影响其他元素，请使用id选择器覆盖。将id =“ list1”放入要作为下拉列表的div。

#list1.dropdown-menu{
min-width: 200px;
}

找出此JSFiddle

的不同之处

Answer 2

在d-inline div中添加form-group类，在text-center div中添加container

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<main class = container>
  <form action="" method="">
      <div class="container mt-5 text-center">
          <h3 class="text-center">Quick Buy</h3>
          <br>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Movie
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Disney's Mulan</a>
                  <a class="dropdown-item" href="#">Tenet</a>
                  <a class="dropdown-item" href="#">Pinocchio</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Select Cinema
              </button>
              <div class="dropdown-menu">
                  <a class="dropdown-item" href="#">Yellow Dhoby</a>
                  <a class="dropdown-item" href="#">Yellow Vivo City</a>
                  <a class="dropdown-item" href="#">Yellow Bedok</a>
              </div>
          </div>
          <div class="form-group d-inline">
              <button class="btn btn-warning" type="submit">Book Now</button>
          </div>
      </div>
  </form>
</main>

Answer 3

在$serializer->normalize($chunk, null, ["groups" => "BlogPost"]); $serializer->serialize($post, 'json', ['groups' => 'BlogPost']); 格中添加样式style="display:inline"。

form-group