下拉菜单文本对齐，css 有效但 bootstrap 失败？

Question

我有这个下拉菜单，它的子菜单项是文本居中对齐的。我想将其更改为左对齐。请看一下：使用 "usual" css，我可以做到（如右箭头所指，这正在更改子菜单项，并且有效）。但我正在学习 bootstrap（这意味着在 html 中进行更改，而不是 css？），我尝试了两种方法（不更改 css），第一种正在更改 "parent" 菜单，在我添加的左箭头上方：

dropdown-menu-left

失败了。因此，第二种方法，我尝试更改子菜单项，就像 above-mentioned "usual" CSS，通过添加到左箭头指向的位置：

justify-content-left

这个也失败了。谁能告诉我为什么？ - 我想这与 "usual" CSS.

相同

更多信息：我说的是这个页面：https://better4living.github.io/what_can_i_afford.html 请查看导航栏 -> 计算器。

请注意：这个问题是关于 bootstrap!

Answer 1

使用应该使用.d-flex然后添加这个class.justify-content-start

注： bootstrap V4

<a href="monthly_payment.html" class="dropdown-item text-white display-4 d-flex justify-content-start ">Monthly Payment</a>

Check this for more justify-content

Answer 2

mbr-additional.css 中第 2906 行的以下 CSS 居中对齐并设置锚元素的显示。

.cid-rnIE1P2zsv .nav-item a {
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0 !important;
    margin: 0rem .65rem !important;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

锚元素

<a class="dropdown-item text-white display-4" href="monthly_payment.html">
  Monthly Payment
</a>

最简单的解决方法是重置 display 锚元素。使用 display:inline !important 或使用 d-inline 如果您使用 Bootstrap-4

因为锚元素已经是flex，所以只需要用justify-content: start左对齐即可。如果您使用 Bootstrap-4，请使用 justify-cotent-start.

下拉菜单文本对齐，css 有效但 bootstrap 失败？

dropdown menu text align, css works but bootstrap fails?

text-align

bootstrap-4

锚元素