Bootstrap導航欄圖標和切換按鈕問題

Question

在可折疊的導航欄中，我添加了徽標圖像，但是它沒有響應，因此我添加了媒體查詢來縮小它，但是當我縮小屏幕時，切換按鈕向下移動，並且切換按鈕內部的圖標不可見。

 .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

這是由於bootstrap .container類的flex-wrap值為wrap 。 添加以下內容：

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

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