Thêm một biểu tượng điện thoại và bản đồ vào bên trái biểu tượng bánh hamburger bootstrap

Question

Tôi có một trang web bootstrap v3 cơ bản. Khi thanh điều hướng chuyển sang biểu tượng bánh hamburger trên màn hình nhỏ hơn, tôi muốn thêm Biểu tượng điện thoại (liên kết đến số điện thoại) và Biểu tượng bản đồ (liên kết với bản đồ google) để người dùng di động có thể dễ dàng truy cập chúng. Tôi đã thử thêm một biểu tượng điện thoại ở bên trái của bánh hamburger, bằng cách thêm mã ngay trước nút .navbar-toggle, nhưng tôi không thể tìm ra cách làm cho nó đáp ứng như biểu tượng bánh hamburger. Tôi có thể định vị nó, nhưng điều đó không giữ cho nó đáp ứng.

Đây là mã hiện tại của tôi. Tôi đã cố gắng làm cho nó hoạt động chỉ với biểu tượng điện thoại, nhưng tôi cũng muốn một biểu tượng bản đồ được đặt bên cạnh nó. Hầu hết kiểu dáng được sao chép từ kiểu dáng lớp học .nav-bar-toggle trong tệp bootstrap.min.css.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
.navbar i { 
 
    font-size: 200%; 
 
    position: relative; 
 
    padding: 9px 10px; 
 
    margin-top: 8px; 
 
    margin-right: 15px; 
 
    margin-bottom: 8px; 
 
    background-color: transparent; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px 
 
}

<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a href="#"><img src="img/autohaus-logo.png" class="navbar-brand"></a> 
 
     <a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a> 
 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">      
 
     <span class="sr-only">Toggle Navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</nav>

Answer 1

Làm thế nào để thêm các biểu tượng uncollapsible đến Bootstrap Navbar

Hãy sử dụng Default navbar từ tài liệu Bootstrap.

1. Thêm cấu trúc <ul class="nav navbar-nav"><li></li></ul> ở cuối khối <div class="navbar-header">. Cấu trúc này sẽ không bị thu gọn trên màn hình hẹp.
2. Thêm the visible-xs class vào thẻ <ul>. Sau đó, nó sẽ chỉ hiển thị trên màn hình hẹp.
3. Thêm biểu tượng làm mục của cấu trúc này.
4. Thêm the pull-right class vào mỗi thẻ <li>. Các mục này sẽ được đặt gần nút chuyển đổi.

Vui lòng kiểm tra kết quả. Đó có phải là điều bạn muốn đạt được không?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
     <ul class="nav navbar-nav visible-xs"> 
 
     <li class="pull-right"><a href="tel:phone-number"><i class="glyphicon glyphicon-phone"></i></a></li> 
 
     <li class="pull-right"><a href="#"><i class="glyphicon glyphicon-map-marker"></i></a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     <li><a href="#">Left</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     <li><a href="#">Right</a></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>