Bootstrap 4导航栏中的元素之间没有空格答案

【问题标题】：No space between elements in navbar with Bootstrap 4Bootstrap 4导航栏中的元素之间没有空格
【发布时间】：2018-10-13 21:33:59
【问题描述】：

我用 Bootstrap 4 制作了一个导航栏菜单，所有元素都在一起，它们之间没有空格。而不是读为“元素元素元素元素元素”显示为“元素元素元素元素”。

可以用 css 修复，但 bootstrap 不应该解决这个问题吗？

这是我的代码

<div class="wrapper navbar-expand-md">
<nav id="nav-main navbar" class="nav-main navbar" role="navigation">
    <div class="container-fluid">
        <h1 class="hdr-logo navbar-brand" role="banner">
            <a class="hdr-logo-link" href="http://localhost/mypage" rel="home">mypage</a>
        </h1>
        <ul class="nav navbar-nav">
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-4">
                <a href="http://localhost/mypage/pagina-ejemplo/">
                    <span data-letters="Página de ejemplo">Página de ejemplo</span>
                </a>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pagina 1
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="http://localhost/mypage/titulo-pagina-1/titulo-pagina-1-a/">
                            <span data-letters="Titulo Página 1.a">Titulo Página 1.a</span>
                        </a>
                    </li>

                    <li>
                        <a href="http://localhost/mypage/titulo-pagina-1-b/">
                            <span data-letters="Titulo página 1.b">Titulo página 1.b</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                <a href="http://localhost/mypage/titulo-pagina-2/">
                    <span data-letters="Titulo página 2">Titulo página 2</span>
                </a>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
                <a href="http://localhost/mypage/titulo-pagina-3/">
                    <span data-letters="Titulo página 3">Titulo página 3</span>
                </a>
            </li>
            <li class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-57 current_page_item menu-item-87">
                <a href="http://localhost/mypage/about-us/">
                    <span data-letters="About Us">About Us</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
<!-- #nav -->

【问题讨论】：

标签： navigation bootstrap-4 navbar space

【解决方案1】：

链接标签中缺少nav-link 类。这个类为链接添加填充，在元素之间提供更多的空气，所以改变这个：

<a href="http://localhost/mypage/pagina-ejemplo/">
    <span data-letters="Página de ejemplo">Página de ejemplo</span>
</a>

到这里：

<a class="nav-link" href="http://localhost/mypage/pagina-ejemplo/">
    <span data-letters="Página de ejemplo">Página de ejemplo</span>
</a>

【讨论】：

是的，解决了它。谢谢大家！！