Question

我有这个下拉菜单，它的子菜单项是文本对齐的中心。我想将其更改为左对齐。请看一下：使用“常规” css，我可以做到（如右箭头所指，这正在更改子菜单项，并且可以工作）。但是我正在学习引导程序（这意味着要在html中而不是css进行更改？），我尝试了两种方法（不更改css），第一种是更改“父”菜单，在我添加的左箭头上方：< / p>

dropdown-menu-left

失败。因此，第二种方法是，我尝试通过添加到左箭头指向的位置来更改子菜单项，就像上述“常规” CSS一样：

justify-content-left

这个也失败了。有人可以告诉我为什么吗？ -我想它与“常规” CSS相同。

有关更多信息：我正在谈论此页面：https://better4living.github.io/what_can_i_afford.html 请查看导航栏->计算器。

请注意：这个问题是关于引导程序的！

Answer 1

使用应使用.d-flex，然后添加此类.justify-content-start

注意：引导程序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进行操作；如果使用的是Bootstrap-4，请使用d-inline

由于锚点元素已经为flex，因此您只需要使用justify-content: start就可以将它们向左对齐。如果您使用的是Bootstrap-4，请使用justify-cotent-start。

下拉菜单文本对齐，CSS可以工作，但引导失败？

2 个答案:

锚元素