Я не могу понять, почему я не могу заставить меню загрузчика 4 рухнуть на мобильном телефоне - PullRequest
Новая
       2

Я не могу понять, почему я не могу заставить меню загрузчика 4 рухнуть на мобильном телефоне

0 голосов
/ 19 сентября 2018

что не так с этим кодом до того, как все мои волосы выпадут. 

<a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35"></a>"The most trusted local community"
	<button class=" navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle navigation"  id="zeropadding">
	<span class="d-md-none"  id="zeropadding"><i class="fas fa-align-left "  >Menu </i></span>  </button></div> <!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">  <!-- Links -->  <ul class="navbar-nav">   


	<li class="nav-item">      <a class="nav-link" href="top10questions.php">Latest questions</a>    </li> 
		<li class="nav-item">      <a class="nav-link" href="contactus.php">Contact Us</a>    </li> 
	</ul></nav>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Извините ... но ваш код действительно ужасен!Один и тот же идентификатор дважды, </div> никогда не открывается, текст без тега ... действительно ужасно!(^ _ ^;)

Я не знаю с чего начать ... может быть, будет лучше, если вы прочитаете документацию по загрузке http://getbootstrap.com/docs/4.1/getting-started/introduction/.

Теперь ваше меню работает (я почистилваш HTML как можно лучше), но вы должны лучше использовать HTML и CSS, потому что, как это ни странно, это не очень хорошая работа, извините.

Кстати, надеюсь, это поможет вам улучшить ваши методы веб-дизайнера.

Приветствия:) 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>



<nav class="navbar navbar-expand-lg">

  <a href="index.php"><img src="logo.png" alt="Ask a local" class="img-fluid w-35">
  "The most trusted local community"</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTogglerNav" id="zeropadding">
    <i class="fas fa-align-left">Menu</i>
  </button>


  <div class="collapse navbar-collapse bg-light" id="myTogglerNav">  <!-- Links -->  
    <ul class="navbar-nav">   
      <li class="nav-item">      <a class="nav-link" href="top10questions.php">Latest questions</a>    </li> 
      <li class="nav-item">      <a class="nav-link" href="contactus.php">Contact Us</a>    </li> 
    </ul>
  </div>
</nav>
0 голосов
/ 19 сентября 2018

Вот отзывчивая складная панель навигации Bootstrap. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      </head>
      <body>

        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="nav-item">      <a class="nav-link" href="top10questions.php">Latest questions</a>    </li> 
                <li class="nav-item">      <a class="nav-link" href="contactus.php">Contact Us</a>    </li> 
              </ul>
              </ul>

          </div>
          </div>
        </nav>

      </body>
    </html>

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

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

...