如何让选择菜单居中对齐，与值无关？答案

【问题标题】：how to have the select menus center aligned independently of the values?如何让选择菜单居中对齐，与值无关？
【发布时间】：2018-08-25 22:35:30
【问题描述】：

我在下面有这个 html，但有一个问题我不明白如何解决。

第一行的选择菜单与下面的选择菜单没有居中对齐。问题似乎是因为第一行有两个值“10”，而另一行只有一个值“0”。

您知道如何解决此问题，以便选择菜单始终居中对齐，而与值的 sie 无关？

<div class="card">
  <div class="card-header d-flex justify-content-between">
    <span class="font-weight-bold text-heading-blue font-size-sm">Item 0</span>
    <span class="ml-auto mr-3 text-heading-blue font-weight-bold font-size-sm">Item 1</span>
    <span class="text-heading-blue font-weight-bold font-size-sm">Item 2</span>
  </div>
  <div class="card_body">
    <ul class="list-group list-group-flush">

      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Title 1</span>
        </div>
        <form class="ml-auto mr-5">
          <select class="custom-select form-control text-heading-blue font-size-xsm">
            <option selected="">1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </form>
        <span class="font-size-sm">10</span>
      </li>
      <li class="list-group-item d-flex align-items-center justify-content-between">
        <div>
          <span class="font-weight-semi-bold text-heading-blue">Title2 </span>
        </div>
        <form class="ml-auto mr-5">
          <select class="custom-select form-control text-heading-blue font-size-xsm">
            <option selected="">1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </form>
        <span class="font-size-sm">0</span>
      </li>
    </ul>

  </div>
</div>

https://jsfiddle.net/ct1g9d4a/2/

【问题讨论】：

是的。对这里使用的类不太熟悉，但可以通过为 .font-size-sm 提供固定宽度来解决它，该宽度足够大以容纳最宽的值。不作为答案发布，因为我不知道如何使选择居中。
谢谢，但使用该解决方案，似乎也行不通：jsfiddle.net/ct1g9d4a/21。
@JohnZ 不，他说的是跨度（.font-size-sm）和其中的数字（“10”，“0”），而不是选择（.font-size-xsm）。 like this

标签： css twitter-bootstrap flexbox bootstrap-4

【解决方案1】：

由于 list-group-items 是 display:flex，因此将 2 个外部列设置为 w-100，以便它们填充行。然后选择将始终居中。

https://www.codeply.com/go/jDUdYMQglG

<div class="card_body">
    <ul class="list-group list-group-flush">
        <li class="list-group-item d-flex align-items-center justify-content-between">
            <div class="w-100">
                <span class="font-weight-semi-bold text-heading-blue">Title 1</span>
            </div>
            <form>
                <select class="custom-select form-control text-heading-blue font-size-xsm">
                    <option selected="">1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </form>
            <div class="font-size-sm w-100 text-right">10000</div>
        </li>
        <li class="list-group-item d-flex align-items-center justify-content-between">
             <div class="w-100">
                <span class="font-weight-semi-bold text-heading-blue">Title2 </span>
            </div>
            <form>
                <select class="custom-select form-control text-heading-blue font-size-xsm">
                    <option selected="">1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </form>
            <div class="font-size-sm w-100 text-right">0</div>
        </li>
    </ul>
</div>

【讨论】：

谢谢，但是如果标题的文本很长，它会破坏布局，如您在此处看到的“jsfiddle.net/ct1g9d4a/26”。如果文本太长，您知道如何换行而不是按原样破坏布局吗？
啊..现在我明白了。修复它的唯一方法是使用 `text-truncate` 截断文本。我更新了 Codeply。
真的再次感谢！您知道“第 2 项”旁边可以有“第 1 项”列，以便有更多的文本空间吗？
当然，只需将右侧的宽度更改为w-50，并确保您也更新了标题行：codeply.com/go/gREYYpFMsw 如果您希望 item1 和 item2 更接近，您可以改用 w-25。