۱ ساجده قائمی
مشکل input group
سحر پاشائی حل شده توسط سحر پاشائی
screenshot-2025-05-16-2-ombd823j.png

سلام وقتتون بخیر

من کد 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>

سلام. وقتتون بخیر
1. می‌تونین از کلاس mx-auto استفاده کنین. این کلاس باعث می‌شه که ستون مورد نظر، به صورت افقی (چپ و راست) بیاد وسط صفحه.

توی کد شما، اون بخشی که کلاس col-md-9 داره، باید بهش این کلاس اضافه بشه. کد اصلاح‌شده این شکلی می‌شه:

<div class="container">
  <div class="row mt-5">
    <div class="col-md-9 col-sm-12 mx-auto">
      <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>
</div>

2. اگه بخواین این قسمت علاوه بر افقی، از نظر عمودی هم وسط بیاد، باید از کلاس‌هایی مثل d-flex و align-items-center استفاده کنین. این دو تا کلاس باعث می‌شن که کل ردیف (row) هم از نظر عمودی وسط قرار بگیره.

کدتون با این تغییر این شکلی می‌شه:

<div class="container">
  <div class="row mt-5 d-flex justify-content-center align-items-center">
    <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>
</div>

3. گاهی وقتا پیش میاد که یه سری استایل اضافی یا کلاس‌هایی که توی فایل CSS یا حتی خود کد HTML دارین، باعث می‌شه این وسط‌چین کردن درست کار نکنه. مثلا ممکنه یه float یا margin اضافی روی عناصر اعمال شده باشه.

برای اینکه این موضوع رو چک کنین، می‌تونین از ابزار Inspect Element مرورگر (تو مرورگر کروم، راست کلیک کنین و گزینه Inspect رو بزنین) استفاده کنین و ببینین چه استایل‌هایی روی اون عنصر اعمال شده.

4. اگه از بوت‌استرپ نسخه ۵ استفاده می‌کنین، حتما مطمئن بشین که فایل‌های CSS و JS بوت‌استرپ رو درست لینک کردین. اگه فایل‌ها درست وصل نشده باشن، ممکنه کلاس‌هایی که استفاده کردین، اصلا کار نکنن.

بهترین پاسخ
سحر پاشائی ۲۷ اردیبهشت ۱۴۰۴، ۰۸:۳۴