Question

normal size中的商品及其精美的品牌“ FASHION AFFAIRS”。

因此，您可以在this picture中看到，因为我缩小了品牌向左移动的尺寸，所以我希望将其固定在中间位置并进行响应

这是我的代码

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class='navbar-toggler' data-toggle="collapse" data-target="#navco">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand align-center" href="#">FASHION AFFAIRS</a>
<div class="collapse navbar-collapse" id="navco">
<ul class="navbar-nav">
<li class='nav-item dropdown'>
    <a class='nav-link dropdown-toggle' data-toggle="dropdown" data-target="drop1" href="">READY-TO-WEAR</a>
<div class="dropdown-menu" aria-lablledby="drop1">
    <a href="" class="dropdown-item">Coats</a>
    <a href="" class="dropdown-item">Suits</a>
    <a href="" class="dropdown-item">Dress Shirts</a>
    <a href="" class="dropdown-item">T-Shirts</a>
    <a href="" class="dropdown-item">Shalwar Kameez</a>
</div>
</li>
<li class='nav-item dropdown'>
    <a class='nav-link' data-toggle="dropdown" data-target="drop2" href="">ACCESSORIES</a>
<div class="dropdown-menu" aria-lablledby="drop2">
    <a href="" class="dropdown-item">Brooch</a>
    <a href="" class="dropdown-item">Tie Pin</a>
    <a href="" class="dropdown-item">Tie Box</a>
    <a href="" class="dropdown-item">Pocket Square</a>
    <a href="" class="dropdown-item">Bow</a>
</div>
</li>
<li class='nav-item dropdown'>
    <a class='nav-link' data-toggle="dropdown" data-target="drop3" href="">SPECIAL COLLECTION</a>
<div class="dropdown-menu" aria-lablledby="drop2">
    <a href="" class="dropdown-item">EZI FIT Undergarments</a>
    <a href="" class="dropdown-item">Mark & Spencer Suits</a>
</div>
</li>
<li class='nav-item'>
    <a class='nav-link' href="">CONTACT</a>
</li>
</ul>
</div>
</nav>

Answer 1

使用某些<span>元素，您可以控制它。 Working Example

代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navco">
    <span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand align-center" href="#">FASHION AFFAIRS</a>
<span class="d-inline d-sm-none"></span>
<span class="d-none d-sm-inline d-md-none"></span>
<span class="d-none d-md-inline d-lg-none"></span>
<div id="navco" class="navbar-collapse collapse">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="drop1" href="">READY-TO-WEAR</a>
            <div class="dropdown-menu" aria-lablledby="drop1">
                <a href="" class="dropdown-item">Coats</a>
                <a href="" class="dropdown-item">Suits</a>
                <a href="" class="dropdown-item">Dress Shirts</a>
                <a href="" class="dropdown-item">T-Shirts</a>
                <a href="" class="dropdown-item">Shalwar Kameez</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="drop2" href="">ACCESSORIES</a>
            <div class="dropdown-menu" aria-lablledby="drop2">
                <a href="" class="dropdown-item">Brooch</a>
                <a href="" class="dropdown-item">Tie Pin</a>
                <a href="" class="dropdown-item">Tie Box</a>
                <a href="" class="dropdown-item">Pocket Square</a>
                <a href="" class="dropdown-item">Bow</a>
            </div>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link" data-toggle="dropdown" data-target="drop3" href="">SPECIAL COLLECTION</a>
            <div class="dropdown-menu" aria-lablledby="drop2">
                <a href="" class="dropdown-item">EZI FIT Undergarments</a>
                <a href="" class="dropdown-item">Mark &amp; Spencer Suits</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">CONTACT</a>
        </li>
    </ul>
</div>

Bootstrap 4导航栏导航栏品牌当我减小屏幕尺寸时我希望它处于中间位置

1 个答案: