Проблема с boostrap3, вставил комментарий и поиск и вход ушли сильно вправо и вниз?
0
Проблема с boostrap3, вставил комментарий и поиск и вход ушли сильно вправо и вниз
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>BY-HV Store</title>
<!-- Подключаем Bootstrap CSS через CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Подключаем style.css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav role="navigation" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1><a href="#">By Herhel Veronika Store</a></h1>
<p>Тепло - наше все</p>
</div>
</div>
</div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse navbar-right">
<ul class="nav nav-pills">
<li> <a href="#">Головна</a> </li>
<li class="active"><a href="#">Пледи</a> </li>
<li><a href="#">Контакти</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-push-3">
<form role="search" class="visible-xs">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запит">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
<h1>Плед дитячий(2x2)</h1>
<hr>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://static-eu.insales.ru/images/products/1/6196/207697972/yantarj-0.jpg"></iframe>
</div>
<div class="margin-8"></div>
<h2>Опис товару</h2>
<hr>
<div class="well">
Плед виготовленний з дуже м'якої тканини, маю малюнок Фіна з мультфільму "Час пригод".
Ціна товару: 100 Гривень.
</div>
<div class="margin-8"></div>
<h2>Відгуки про товар</h2>
<hr>
<div class="panel panel-info">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<div class="panel-content">
Panel content
</div>
</div>
</div>
<div class="col-sm-3 col-sm-pull-9">
<div class="panel panel-info hidden-xs">
<div class="panel-heading"><div class="sidebar-header">Пошук</div></div>
<div class="panel-body">
<form role="search">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control input-lg" placeholder="Ваш запит">
<div class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><div class="sidebar-header">Вхід</div></div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Логін">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" placeholder="Пароль">
</div>
<button type="submit" class="btn btn-warning pull-right">вхід</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<footer>
<div class="container">
<p class="text-center"> <a href="https://fructcode.com">BY-HV.ru</a> </p>
</div>
</footer>
<!-- Подключаем jQuery и Bootstrap JS через CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
А CSS /* Header */
.header a, a:hover {
color: #f0ad4e;
text-decoration: none;
}
.header h1 {
letter-spacing: 15px;
font-size: 300%;
}
.header p {
color: white !important;
font-size: 90%;
letter-spacing: 3px;
}
/* Header off */
/* Menu */
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: #fff;
background-color: #346270;
}
.nav-pills>li>a {
color: #fff;
}
.nav-pills>li>a:hover {
background-color: #346270;
}
.navbar-inverse {
padding: 1%;
border-radius: 0;
}
/* Menu off */
/* Mobile version */
@media (max-width: 767px) {
.nav-pills>li {
float: none;
}
.nav-pills {
text-align: center;
}
.header h1 {
font-size: 280%;
letter-spacing: 5px;
}
.header {
text-align: center;
}
}
/* Mobile version off */
.clear {
clear: both;
height: 63px;
}
.wrapper {
min-height: 100%;
}
html, body {
height: 100%;
}
.films_block {
text-align: center;
}
.films_block img {
margin-bottom: 5%;
border-radius: 5px;
border: solid 5px #dad7d5;
width: 100%;
}
.film_label {
padding: 2%;
margin-bottom: 4%;
}
.embed-responsive-16by9 {
width: 100%;
height: 100%;
}
.margin-8 {
margin-top: 8%;
}
.panel {
border: none;
}
.panel-body {
background-color: #f9f9f9;
}
.panel-info>.panel-heading {
background-color: #f0ad4e;
color: white;
border-color: transparent;
}
.sidebar-header {
font-size: 120%;
letter-spacing: 2px;
}
.form-control {
border-radius: 0px;
}
.input-lg {
font-size: 14px;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}