Question

在可折叠导航栏中，我添加了徽标图像，但是它没有响应，因此我添加了媒体查询以缩小它，但是当我缩小屏幕时，切换按钮向下移动，并且切换按钮内部的图标不可见。 / p>

.navbar{
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.54), 0 2px 10px 0 rgb(175, 175, 175);	
}
.navbar-toggler{
	background-color: #2196f3;
	margin-right: 10px;
}
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2196f3!important;
}

/* media queries */
  @media (max-width:490px){
    .navbar-brand > img{
    	width: 80%;
    }
    .navbar-brand{
    	margin-right: 0px;
    	/*text-align: center;*/
    }
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container">
  	<a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
    
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
</nav>

Answer 1

Bootsrap为我们提供了有效的方法，即行和列功能。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="row"><div class="col-8">
    <a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a></div>  <div class="col-4">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">        
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
  </div>
</nav>

Answer 2

您必须在@media中更改.navbar-dark .navbar-brand的宽度

@media (max-width:...px){
    .navbar-dark .navbar-brand{
       width: ...; 
    }
}

.navbar{
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.54), 0 2px 10px 0 rgb(175, 175, 175);	
}
.navbar-toggler{
	background-color: #2196f3;
	margin-right: 10px;
}
.dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #2196f3!important;
}

.navbar-toggler{
  color:#2196f3 !important;
  border-color:#2196f3 !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(33,150,243, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.nav-link{
  color:#2196f3 !important;
}
.nav-link:hover{
  color:#8ac6f6 !important;
}
/* media queries */
  @media (max-width:890px){
    .navbar-brand{
       width: 50%; 
    }
    .navbar-brand{
    	margin-right: 0px;
    	/*text-align: center;*/
    }
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container">
  	<a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
    
    <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>  
    </ul>
  </div>
  </div>  
</nav>

Answer 3

这是由于引导.container类的flex-wrap值为wrap。添加此：

.container{
  flex-wrap:nowrap !important;
}

https://jsfiddle.net/ukynjx3L/1/

Bootstrap导航栏图标和切换按钮问题

3 个答案: