使用 Bootstrap 对齐左边缘时居中列表项

Posted 2023-03-05

【中文标题】使用 Bootstrap 对齐左边缘时居中列表项

【英文标题】：Center list items while aligning to left edge with Bootstrap

【发布时间】：2022-01-17 21:15:05

【问题描述】：

我在网站上使用以下引导模式（列表项较少的简化示例）：

#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" >
      <span>Item 1</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" >
      <span>Item 2</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" >
      <span>Item 3</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" >
      <span>Item 4</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      <img src="/images/badges/img.svg" >
      <span>Item 5</span></a>
  </li>
</div>

默认情况下它是左对齐的，虽然整洁，但居中看起来会更好：

但是，当我将其与 justify-content:center 居中时，它会失去沿左边缘的整齐对齐方式：

如何通过保持项目与相同的左边缘对齐，同时将它们置于模态的中间来获得两全其美的效果？我突然想到，我想要的可能涉及某种形式的边距和/或填充，但是在开发工具中没有多少弄乱它们可以使这个工作正常，所以我显然遗漏了一些东西，我现在不知所措。

【参考方案1】：

我会做一些事情。首先，将列表项放在列表元素中。这是有效 html 所必需的。

然后，使用flush list group 而不是导航菜单。它的初始样式更接近您想要的。

最后，使容器成为具有 Bootstrap 类的 flexbox 元素，并证明其内容中心的合理性。这可以是模态主体或内部元素。您必须在 nav-link 元素上摆弄水平填充，以使列表项边框在您使用的每个模态尺寸下变为全宽。

请注意，我没有编写任何 CSS。我还删除了您的大部分自定义 CSS，并将其替换为 Bootstrap 类。我强烈建议非常熟悉 Bootstrap 的组件和flex utilities。您不想为开箱即用的事情编写自定义 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/bootstrap@5.1.3/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"  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"  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"  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"  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"  class="mx-3">
        <span>Item 5</span></a>
    </li>
  </ul>
</div>

【讨论】：

这看起来很有希望，我同意仅使用 Bootstrap 的解决方案比堵塞我的 CSS 更可取，但不幸的是它似乎不起作用 - 相反，我的 SVG 只是增加到最大尺寸, 并将尺寸样式从 .nav-link img 放回结果：i.imgur.com/PHTMgp1.jpg。这可能与您对删除触发和对齐模式的关键实用程序类的问题的编辑有关，我显然无法摆脱。

模态的东西被删除了，因为如果包含 Bootstrap 库，模态包装是隐藏的。不过，这些都不会影响内容。

你的意思是“你必须摆弄导航链接元素上的水平填充，以使列表项边框为你正在使用的每个模态大小全宽”。这是解决方案中非常关键的部分，你是说没有办法像我的问题那样做出响应吗？

媒体查询是响应式的。如果没有完整的演示，很难提供细节。您的模态是否在所有屏幕尺寸下都是灵活的，还是具有固定宽度？

我没有使用 CSS 的解决方案。您有两个相互冲突的要求（左对齐 和 在宽容器中居中）。这可能是我能提供的最好的，没有自定义 CSS 网格的东西。这似乎有点矫枉过正。

【参考方案2】：

使用“对齐内容中心”为您的导航项目保留两个父 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>

【讨论】：

不，这也不起作用，可能是因为您没有考虑到我使用的不是divs，而是像a、img和@987654326这样的内联元素@.

@isherwood 是的，我同意我们可以使用 Bootstrap 实现大多数样式，

@HashimAziz 要实现左对齐元素的居中 div，只需使用带有 justify 内容中心的 flex 容器作为父 div。它可以是自定义 css 或引导类。无论是 div 还是 span，内联元素都没有依赖关系！