2017-08-30 67 views
6

Tôi đã cập nhật lên phiên bản v1.0 beta của ng-bootstrap. Bây giờ thanh điều hướng luôn được tạo hình. Khi tôi nhấp vào bánh hamburger để chuyển đổi menu, nó sẽ mở ra, nhưng hiển thị nội dung theo chiều dọc chứ không phải theo chiều ngang.Thanh điều hướng luôn bị thu hẹp

Tôi đã bao gồm mã cho điều hướng bên dưới. Nó giống như trước đây. Tại thời điểm này tôi không thể trêu chọc nếu vấn đề nằm với ng-bootstrap, bootstrap 4 hoặc kết hợp chúng.

Kết quả lý tưởng của tôi là để menu chỉ xuất hiện khi màn hình có kích thước nhất định, như trong những ngày cũ.

Tôi đã xem Bootstrap4 navbar always collapsed. Tôi đã mở câu hỏi này vì nó không bao gồm ng-bootstrap.

<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top" style="background-color: white"> 
    <button class="navbar-toggler navbar-toggler-right" 
    type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" 
    aria-controls="exCollapsingNavbar2" 
    data-toggle="collapse" 
    aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Vesalius - Bobby's World</a> 
    <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse" id="exCollapsingNavbar2"> 
    <div class="navbar-nav mr-auto"> 
     <a class="nav-item nav-link" routerLink="/provider/portal/" routerLinkActive="active">Schedule</a> 
     <a class="nav-item nav-link" routerLink="/patient/portal/medical-history" routerLinkActive="active">Form Editor</a> 
    </div> 

    <div class="navbar-nav"> 
     <form class="form-inline"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search Patient"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
    </div> 
    </div> 
</nav> 

enter image description here

Trả lời

24

Một lớp navbar-expand* là cần thiết nếu bạn muốn thanh điều hướng để mở rộng theo chiều ngang, nếu không nó mặc định là điện thoại di động/bị sập phiên bản.

Kể từ Bootstrap 4 beta, các lớp navbar-toggleable-* đã thay đổi thành navbar-expand-*. Trong trường hợp của bạn navbar-toggleable-sm sẽ thay đổi thành navbar-expand-md.

Các vấn đề liên quan