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

时间：2019-06-25 05:12:21

标签： bootstrap-4 navbar

我需要带有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>

我需要波纹管图像

桌面视图 enter image description here

移动视图 enter image description here

移动设备支出菜单 enter image description here

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题