时间戳

首页 > 解决方案 > Bootstrap 4 navbar navbar 品牌我希望它在我减小屏幕尺寸时处于中间位置

twitter-bootstrap - Bootstrap 4 navbar navbar 品牌我希望它在我减小屏幕尺寸时处于中间位置

问题描述

这在正常大小和它的好品牌 "FASHION AFFAIRS"。

所以你可以在这张照片中看到，当我减小我的品牌到左侧的尺寸时，我想让它在中间固定和响应

这是我的代码

<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>

标签： twitter-bootstrapnavbar

解决方案

使用一些<span>元素，您可以控制它。工作示例

代码：

<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>

推荐阅读