
سلام وقتتون بخیر
من کد input goup و drop down رو به شکل زیر نوشتم ولی نمیدونم چرا گوشه سمت راست قرار گرفته و وسط نمیاد.
<div class="container">
<div class="row mt-5">
<div class="col-md-9 col-sm-12">
<div class="input-group mb-3 rounded">
<button class="btn btn-outline-secondary dropdown-toggle text-white rounded-end bg-secondary " type="button" data-bs-toggle="dropdown" aria-expanded="false">دسته بندی ها</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">لباس ها</a></li>
<li><a class="dropdown-item" href="#">موبایل</a></li>
<li><a class="dropdown-item" href="#">لوازم خانه</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">غیره</a></li>
</ul>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<button class="btn btn-outline-secondary bg-danger rounded-start text-white " type="button" id="button-addon2">بگرد</button>
</div></div>
<div class="col-md-3 col-sm-12">
<div class="dropdown">
<a class=" shopping-custom border-0 btn btn-link text-white dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="mr-2">سبد خرید</span> <i class="fa-solid fa-cart-plus"></i>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>