Question

我需要带有4个链接和中心徽标的boostrap 4导航栏。左侧有2个链接，右侧有2个链接响应

/*------------- navigation -------------*/
.site-logo {
	width: 100px;
	padding: 5px;
}

.navbar .flex-1 {
    flex: 1;
    flex-basis: 100%;
}
nav#main-header {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
}
nav ul {
	z-index: 10;
	height: 48px;
	position: relative;
}

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/99adv.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

<nav class="navbar sticky-top navbar-expand-md navbar-dark main-nav" style="background-color: #4F78F1" id="main-header">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse w-100">
            <ul class="nav navbar-nav m-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">features</a>
                </li>
                <li class="logo">
                   <a class="nav-link" href="#"> <img src="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" class="site-logo" alt=""></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">More</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>   
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body>
</html>

我需要波纹管图像

桌面视图

移动视图

移动设备支出菜单

Answer 1

在CSS中使用媒体查询，它将起作用

@media (min-width: 768px)

#nav-logo{
    display:block;
  }
  
  .nav-item.logo{
    display:none;
  }



@media (min-width: 768px) {
  #nav-logo{
    display:none;
  }
  .nav-item.logo{
    display:block;
  }
}

/*------------- navigation -------------*/
.site-logo {
	width: 90px;
	padding: 5px;
}

.navbar .flex-1 {
    flex: 1;
    flex-basis: 100%;
}
nav#main-header {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
}

/*nav ul {
	z-index: 10;
	height: 48px;
	position: relative;
}*/

<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="assets/css/99adv.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

<nav class="navbar sticky-top navbar-expand-md navbar-dark main-nav" style="background-color: #4F78F1" id="main-header">

    <div class="container">
     <a class="navbar-brand" href="#" id="navbarbrand" style="margin:0 auto; position:absolute; left:42%;top:3%;"> <img src="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" class="site-logo" id="nav-logo" alt=""></a>
     <a class="navbar-brand"></a>
        <button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse w-100">
            <ul class="nav navbar-nav m-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">features</a>
                </li>
                <li class="nav-item logo" style="width:100px;">
                   <a class="nav-link" href="#" style="position:absolute;"> <img src="https://seeklogo.com/images/T/twitter-icon-circle-blue-logo-94339974C6-seeklogo.com.png" class="site-logo" alt=""></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">More</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id urna quis libero egestas varius. Pellentesque et felis at est ornare mollis quis nec enim. Nulla non lorem ut metus tincidunt congue. Nullam scelerisque dolor sed viverra dictum. Integer vitae neque viverra, vestibulum ex in, vestibulum tellus. Duis quis sem dui. Nunc metus tellus, hendrerit vel tincidunt a, consectetur vitae neque. Maecenas ac eleifend lectus. Vivamus elit erat, consectetur nec tincidunt vel, dignissim in ligula. Aenean nulla justo, bibendum in lorem tristique, porta pellentesque ligula. Nulla id hendrerit turpis. Phasellus nec metus vehicula, porttitor eros id, facilisis nibh. Donec aliquam dapibus diam, eget varius ex volutpat non. Integer facilisis commodo mauris at cursus. Pellentesque eu lectus quis est sagittis tincidunt. 
</p>   
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<body>
</html>

导航栏链接之间的Bootstrap 4响应中心徽标

1 个答案: