Question

我有这个代码，但是当我改变窗口的大小以测试响应时，徽标消失，只显示手风琴菜单的汉堡包图标。我真的想知道如何在整个宽度时将图像标志保持在中间，并在折叠时保持在中间以进行响应式设计。谢谢！

	<head>
		
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

		<!-- Custom styles for this template -->
    <link href="navbar-top.css" rel="stylesheet">

    
	</head>
	<body>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .navbar-nav > li {
    float: none;
    vertical-align: bottom;
  }
  #site-logo {
    position: relative;
    vertical-align: bottom;
    bottom: -35px;
  }
  #site-logo a {
    margin-top: -53px;
  }
  #container,.navbar .navbar-default{
  border-top: 2px dotted blue;
  border-bottom: 2px dotted blue; 
  background-image: url("img/fondo_menu_nav.jpg");

  background: url('img/fondo_menu_nav.jpg');
 font-style: zapfino;
}
</style>
<nav class="navbar navbar-default ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Nav</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav nav-justified navbar-nav center-block">
        <li class="active"><a href="acne.html">EL ACNÉ</a></li>
        <li><a href="productos.html">PRODUCTOS</a></li>
        <li id="site-logo" class="hidden-xs"><a href="index.html"><img id="logo-navbar-middle" src="img/fondo_logo_barrocutina.png" width="150%" alt="IMAGE LOGO"></a></li>
        <li><a href="participa.hmtl">PARTICIPÁ</a></li>
        <li><a href="contacto.html">CONTACTO</a></li>
        
      </ul>
    </div>
  </div>
</nav>
	
			




<!-- Latest compiled and minified JavaScript -->	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</body>
</html>

导航栏中间有徽标，倒塌时消失

0 个答案: