css 如何在同一行中添加输入和按钮

zkure5ic  于 2023-04-13  发布在  其他
关注(0)|答案(4)|浏览(134)

我如何使用bootstrap-5将输入和按钮添加到同一行,我在这里尝试的是不起作用的,是否有任何样式或添加一些bootstrap-5标记?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
 
 
 
 <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form action="" method="get">
                    <input type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>
            </div>
        </div>
    </div>
ippsafx7

ippsafx71#

使用Bootstrap的input groups

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

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <form action="" method="get">
        <div class="input-group">
          <input type="text" class="form-control">
          <button class="btn btn-sm btn-primary" type="submit">Search</button>
        </div>
      </form>
    </div>
  </div>
</div>
waxmsbnn

waxmsbnn2#

您可以尝试将它们拆分为列,方法是将类row添加到form中,并将div添加到类col-auto

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <form class="row" action="" method="get">
               <div class="col-auto">
                  <input type="text" name="search_query" class="form-control">
               </div>
               <div class="col-auto">
                  <button type="submit" class="btn btn-primary btn-sm">Search</button>
               </div>
            </form>
        </div>
    </div>
</div>
dz6r00yl

dz6r00yl3#

你可以按照这个简单的代码,在这里添加一些bootstrap 5类

<div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form class="d-flex " action="" method="get">
                    <input class="mx-2" type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>
            </div>
        </div>
    </div>
k97glaaz

k97glaaz4#

Flexbox。

.my-flex {
display: flex;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
 
 
 
 <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form action="" method="get" class="my-flex">
                    <input type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>
            </div>
        </div>
    </div>

相关问题