Why can styles fly from the bootstrap menu (nav)?

A

Andrey Popov2017-08-27 04:18:51

css

Andrey Popov, 2017-08-27 04:18:51

Friends, for some reason I don’t understand, the styles for the menu are either normal, or they fly off and it looks ugly. When I first created the menu, it had a bad look without the necessary styles, then I poked bootstrap versions, jquery libs, etc., everything became fine. Now, all of a sudden, everything has become sucks again ...
The pages of the page and the menu view are below:

<!DOCTYPE html>
<html lang="ru">
  <head>
      <title>TestPage</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="css/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="sendParams.js"></script>
  </head>
  <body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-menu" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">SiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="mobile-menu">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Main</a></li>
        <li><a href="#">Seciond</a></li>
        <li><a href="#">Third</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another Action</a></li>
                <li><a href="#">Somethin Action</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">Separator Action</a></li>
              </ul>            
          </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <article class="row">
    <div class="web-mini">
      <ul class="thumbnails">
        <li class="col-lg-4">
          <div class="thumbnail">
            <img src="/css/image/text-a.png" alt="text-a">
            <h3>Это раздел "А".</h3>
            <p>Здесь должно быть описание раздела "А", но его нет.</p>
            <a href="http://test1.ru/about-a/" class="btn btn-primary btn-lg btn-block" target="_blank">Подробнее</a>
          </div>
        </li>
        <li class="col-lg-4">
          <div class="thumbnail">
            <img src="/css/image/text-b.png" alt="text-b">
            <h3>Это раздел "В".</h3>
            <p>Здесь должно быть описание раздела "А", но его нет.</p>
            <a href="http://test1.ru/about-b/" class="btn btn-primary btn-lg btn-block" target="_blank">Подробнее</a>
          </div>
        </li>
        <li class="col-lg-4">
          <div class="thumbnail">
            <img src="/css/image/text-c.png" alt="text-b">
            <h3>C: PASSWORD GENERATOR</h3>
            <p>Чтобы сгенерировать пароль, выберите нужную длину и символы.</p>
            <form method="post">
              <div class="form-group">
                <label>Введите длину пароля:</label>
                <input type="text" class="form-control" name="pass_lenght" id="pass_lenght" placeholder="Например, 10">
              </div>
              <div class="checkbox-num">
                <label>
                  <input type="checkbox" name="cb_abc" id="cb_abc" value="yes"> Использовать буквы(a-z/A-Z)
                </label>
              </div>
              <div class="checbox-abc">
                <label>
                  <input type="checkbox" name="cb_num" id="cb_num" value="yes"> Использовать цифры(0-9)
                </label>
              </div>
              <div class="checbox-sym">
                <label>
                  <input type="checkbox" name="cb_sym" id="cb_sym" value="yes"> Использовать знаки
                </label>
              </div>
                <button type="submit" class="btn btn-primary btn-lg btn-block" onClick="sendParameters()">JavaScript Gen</button>
            </form>
              <div id="pass"></div>
          </div>
        </li>
      </ul>
    </div>
    </article>
</div>

  </body>
  
  <footer>
      <div class="row">
          <div class="alert alert-info">
              <p><b>АХТУНГ!</b> Всё хорошо.</p>
          </div>
      </div>
  </footer>
</html>

Screenshots:
What it looks like:

What it should look like:

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

E

Exploding, 2017-08-27
@cytronex8

In chrome, press F12 or Ctrl + Shift + i and a fairy-tale world will open in front of you, in which it is always "spring"! And in the spring, as the saying goes, you can immediately see "who shitted where" :)

P

Ptolemy_master, 2017-08-27
@Ptolemy_master

Check if the stylesheets (the files themselves) are indeed included. F12 -> Sources -> tree of connected files Sources