我如何使用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>
4条答案
按热度按时间ippsafx71#
使用Bootstrap的input groups:
waxmsbnn2#
您可以尝试将它们拆分为列,方法是将类
row
添加到form
中,并将div添加到类col-auto
中dz6r00yl3#
你可以按照这个简单的代码,在这里添加一些bootstrap 5类
k97glaaz4#
Flexbox。