Друзья, по непонятной мне причине стили для меню то нормальные, то слетают и выглядит оно уродливо. Когда только создавал меню, оно имело плохой вид без нужных стилей, потом потыкал версии бутстрапа, либ jquery и т.д, всё стало хорошо. Сейчас-же, внезапно, всё вновь стало фигово...
Сурцы страницы и вид меню ниже:
<!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>
Скриншоты:
Как выглядит:
Как должно выглядеть:
