Мне нужна помощь в настройке мобильного представления для углового сайта - PullRequest
Новая
       6

Мне нужна помощь в настройке мобильного представления для углового сайта

0 голосов
/ 28 июня 2019

Я создаю веб-сайт, для которого мне нужна помощь в исправлении мобильного представления для него.У меня есть меню, в котором есть 5 кнопок.Я доволен видом ноутбука / рабочего стола, но не мобильным.

В мобильном представлении у меня все 5 кнопок вместо кнопки меню.Например, мой веб-сайт выглядит как https://www.trujet.com (не все функции, кроме меню). Я включаю код здесь: 


<head>
  <title>Mywebsite</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>

</head>
<body>

<nav role="navigation" class="navbar navbar-expand-md bg-dark navbar-dark">
    <a id="site-logo" href="#">
        <img src="assets/img/website.png">
      </a>
  <a class="navbar-brand"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"> </span>
  </button>
  <a href="#" class="navbar-brand"></a>
  <div class="navbar navbar-custom">
  <div class="collapse navbar-collapse show" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
          <a routerLink="/" (click)="homec()" class="btn btn-primary">
            <h5>HOME</h5></a>
      </li>
      <li class="nav-item">
          <a routerLink="/aboutus" (click)="aboutusc()" class="btn btn-primary">
            <h5>ABOUT US</h5></a>
      </li>
      <li class="nav-item">
          <div class="dropdown">
              <button type="button" class="dropbtn"
              class="btn btn-primary"><h5>PACKAGES</h5></button>
              <div class="dropdown-content">
                <a routerLink="/eduinstitution" (click)="educac()" class="btn btn-primary"><h6>
                  EDUCATIONAL INSTITUTIONS</h6></a>
                <a routerLink="/international" (click)="interc()" class="btn btn-primary"><h6>
                  INTERNATIONAL</h6></a>
                <a routerLink="/domestic" (click)="domesc()" class="btn btn-primary"><h6>
                  DOMESTIC</h6></a>
                <a routerLink="/honeymoon" (click)="honeyc()" class="btn btn-primary"><h6>
                  HONEYMOON</h6></a>
                </div>
              </div>
      </li>    
      <li class="nav-item">
          <a routerLink="/gallery" (click)="galleryc()" class="btn btn-primary">
            <h5>GALLERY</h5></a>
      </li>
      <li class="nav-item">
          <a routerLink="/contactus" (click)="contactus()" class="btn btn-primary">
            <h5>CONTACT US</h5></a>
      </li>
      <li class="nav-item">
        <span class="glyphicon glyphicon-envelope">Mywebsite@gmail.com |  </span>
            <span class="contact-phone small">+91 xxxxxxxxxx</span>
    </li>
      <li class="nav-item">
        <a href="https://www.facebook.com/website"><img src="assets/img/fb.png"></a> 
    </li>
    </ul>
  </div>  
</div>
</nav>
</body>
</html>

Когда я щелкаю меню гамбургера, оно не отображаетсяменю (дома, свяжитесь с нами и т. д.)Короче говоря, меню Bootstrap - Navbar Collapse не отображается.

Ответы [ 2 ]

0 голосов
/ 20 июля 2019 
HTML:
<div class="container-fluid">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#"><span style="color: yellow">Website</span></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse show" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a routerLink="/" (click)="home()">
                <span class="sr-only">(current)</span>
                <span style="color: yellow">
                  <h4>HOME</h4>
                </span></a>
        </li>
        <li class="nav-item">
          <a routerLink="/aboutus" (click)="aboutus()">
                <span style="color:yellow">
                  <h4>ABOUT US</h4>
                </span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span style="color:yellow">
                  <h4>DROPDOWN</h4>
                </span>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a routerLink="/expresscar" (click)="cexpcs()"><span style="color:yellow">
                      <h6>
                        SUB-MENU1</h6>
                    </span></a>
            <a routerLink="/permaiser" (click)="cpemas()"><span style="color:yellow">
                      <h6>
                        SUB-MENU2</h6>
                    </span></a>


          </div>
        </li>
        <li class="nav-item">
              <a routerLink="/faqs" (click)="faqscl()">
                <span style="color:yellow">
                  <h4>FAQ's</h4>
                </span>
              </a>
            </li>
       <li class="nav-item">
              <a routerLink="/gallery" (click)="gallery()"><span style="color:yellow">
                  <h4>GALLERY</h4>
                </span></a>
            </li>
            <li class="nav-item">
              <a routerLink="/contact" (click)="contactus()"><span style="color:yellow">
                  <h4>CONTACT US</h4>
                </span></a>
            </li> 
      </ul>
    </div>`enter code here`
  </nav>
  </div>

Это сработало для меня в Angular 7 и Bootstrap, спасибо за вашу помощь.

0 голосов
/ 28 июня 2019

Ну, так как вы используете Angular, вы можете воспользоваться RxJS и использовать BreakpointObserver от Angular, который включен в @angular/cdk/layout.Если вы посмотрите в Google примеры работы с BreakpointObserver, вы найдете гораздо больше информации, чем мы можем дать вам в Q & A о переполнении стека.

Я бы посоветовал вам попробовать следовать руководству по наблюдению за точками останова, тогда, если что-то есть в вашемкод, который не работает должным образом, возвращается в StackOverflow и просит помощи относительно этого конкретного примера.Ваш текущий вопрос технически не подходит для StackOverflow, поскольку он не содержит примеров кода, который вы уже пробовали.

Короче говоря, мы не можем вам помочь, потому что вопрос слишком широкий.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...