Question

.navcolor {
    background-color: #ffffff !important;
}

.logoWidth {
    height:  100% !important;
    width:   23.1% !important;
    margin: -1% 0% 0% 23.3% !important;
    padding: 0% 0% 0% 0% !important;
}

<nav class="navbar navbar-expand-lg navbar-light navcolor bg-light">
    <a class='space' href="https://dev.jillako.com/en/flights">
        <img class='logoWidth' src="/assets/logo.png" alt="">
    </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Flights</a>
            <a class="nav-item nav-link" href="#">Hotels</a>
            <a class="nav-item nav-link" href="#">Offers</a>
          </div>
        </div>
</nav>

我正在尝试创建一个带有引导程序4的Navbar，因此首先我将一个徽标放入锚标记中。接下来，我开始像这样保留“关于我们的家” 但是锚标签和家之间有空白吗？如何解决此问题，请帮助我解决这个问题？

Answer 1

您可以在导航栏徽标width:**px中指定<img>，并且可以使用class="ml-auto"将列表右对齐

      <nav class="navbar navbar-expand-lg navbar-light navcolor bg-light">
            <a class='space' href="https://dev.jillako.com/en/flights">
                <img class='logoWidth' src="/assets/image.jpg"
                    style="width:100px">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <a class="nav-item nav-link active" href="#">Flights</a>
                    <a class="nav-item nav-link" href="#">Hotels</a>
                    <a class="nav-item nav-link" href="#">Offers</a>
                </div>
            </div>
        </nav>

导航栏徽标后如何避免空白？

1 个答案: