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

Question

在可折叠导航栏中，我添加了一个 Logo 图像，但它没有响应，所以我添加了一个媒体查询来缩小它，但是当我缩小屏幕时，切换按钮向下移动，切换按钮内的图标不可见。

.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

Bootstrap 为我们提供了行和列特征的有效方法。

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