使用Bootstrap對齊左邊緣時居中串列項

我在網站上使用以下 Bootstrap 模式（串列項較少的簡化示例）：

#manufacturer-modal .modal-body {
  padding: 0;
}

#manufacturer-modal .nav-item {
  list-style: none;
}

#manufacturer-modal .nav-link {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 3.5em;
  border-bottom: 1px solid #dee2e6;
  padding: 0;
}

#manufacturer-modal .nav-link img {
  width: 80%;
  max-width: 2.6em;
  margin: 0 1.5em;
  display: block;
}

.show {
  display: block !important;
}

<div class="modal-body">
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 1</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 2</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 4</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" alt="">
      <span>Item 5</span></a>
  </li>
</div>

默認情況下它是左對齊的，雖然整潔，但居中看起來更好：

但是，當我用 將justify-content:center它居中時，它會失去沿左邊緣的整齊對齊：

如何通過將專案與相同的左邊緣對齊同時將它們居中在模態中間來獲得兩全其美的效果？我突然想到，我想要的可能涉及某種形式的邊距和/或填充，但是在開發工具中沒有多少弄亂它們可以使這個作業，所以我顯然錯過了一些東西，我現在不知所措。

uj5u.com熱心網友回復：

我會做幾件事。首先，將串列項放在串列元素中。這是有效 HTML 所必需的。

然后，使用重繪 串列組而不是導航選單。它的初始樣式更接近您想要的樣式。

最后，使容器成為具有 Bootstrap 類的 flexbox 元素并對齊其內容中心。這可能是模態主體或內部元素。您必須擺弄nav-link元素上的水平填充，以使串列項邊框為您正在使用的每個模式尺寸全寬。

請注意，我沒有撰寫任何 CSS。我還洗掉了您的大部分自定義 CSS，并將其替換為 Bootstrap 類。我強烈建議您非常熟悉 Bootstrap 的組件和flex 實用程式。您不想為開箱即用的事情撰寫自定義 CSS。這會讓你現在和以后做更多的作業。

/* #manufacturer-modal */ .list-group-item {
  font-size: 1.2em;
  font-weight: 500;
  letter-spacing: -1px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="modal-body d-flex justify-content-center">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 1 with a Longer Title</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 2</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 3</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 4</span></a>
    </li>
    <li class="list-group-item">
      <a class="nav-link text-dark" href="#">
        <img src="https://via.placeholder.com/60" alt="" class="mx-3">
        <span>Item 5</span></a>
    </li>
  </ul>
</div>

uj5u.com熱心網友回復：

使用“對齊內容中心”為您的導航專案保留兩個父 div flex 元素，這些代碼將您的專案作為 div 的中心與左對齊對齊。

.first-parent {
  display: flex;
  justify-content: center;
}

.second-parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div class="first-parent">
  <div class="second-parent">
        <div>Item one</div>
        <div>Item two loreum</div>
  </div>
</div>

標籤：html css 推特引导 引导模式 bootstrap-5

上一篇：為什么我的媒體查詢對我的CSS沒有影響？

下一篇：如果我在原始按鈕內有一個跨度來觸發下拉選單，則下拉選單不起作用