如何将对象放在一行中 [Bootstrap 5]答案

【问题标题】：How to place objects in one line [Bootstrap 5]如何将对象放在一行中 [Bootstrap 5]
【发布时间】：2022-11-02 02:48:45
【问题描述】：

我需要它在一行中，如何解决这个问题？

我的代码：

<div class="d-none d-lg-block d-xl-block">
     <div class="nav-item">
       <form class="d-flex" action="search.php" method="get">
         <input class="form-control me-2 px-3" type="search" placeholder="Search" name="search" aria-label="Search">
       </form>
          <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#loginmodal">Login</button>                    
          <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#signupmodal">Sign Up</button>
      </div>
     </div>

【问题讨论】：

标签： bootstrap-5

【解决方案1】：

使用 Bootstrap 5 网格系统（确保包含 Bootstrap 5 css url）

例子：

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

https://getbootstrap.com/docs/5.0/layout/grid/

您的代码看起来像这样：

<div class="d-none d-lg-block d-xl-block">
    <div class="nav-item">
        <div class="row">
            <div class="col">
                <form class="d-flex" action="search.php" method="get">
                    <input class="form-control me-2 px-3" type="search" placeholder="Search" name="search" aria-label="Search">
                </form>
            </div>
            <div class="col">
                <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#loginmodal">Login</button>                    
                <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#signupmodal">Sign Up</button>
            </div>
        </div>
    </div>
</div>

您也可以将注册按钮单独放入一列。

【讨论】：

我尝试使用它，但结果是一样的。
分享你的尝试
@dxDark 我已经更新了我的答案，提供了更多细节和示例

【解决方案2】：

在表单中添加按钮，或将 d-flex 添加到 nav-item 类

像这样：

 <div class="nav-item d-flex">

【讨论】：