fc_logo_w_label
FructCode
Курсы и скринкастыКомьюнитиБлогЦена и оплата
Темно
ru
ВойтиРегистрация

Bootstrap 3 - не задаются стили для панели?

0

Я пытаюсь задать стили для панели но у меня не получается. Что делать? Стили попросту не задатся!

html, body {
	height: 100%;
}

.header a, a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header h1 {
	letter-spacing: 10px;
	font-size: 300%;
}

.header h1>a:hover {
	color: #f0ad4e;
	text-decoration: none;
}

.header p {
	color: white !important;
	font-size: 90%;
	letter-spacing: 3px;
}

.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 {
	color: #fff;
	background-color: #346270 !important;
}

.navbar-inverse {
	padding: 1%;
}

.clear {
	clear: both;
	height: 63px;
}

.wrapper {
	min-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%;
}

.margin-8 {
	margin-top: 8%;
}

.blog a:hover {
	text-decoration: none;
	color: #f0ad4e;
}

.panel {
	border: none;
}

.panel-body {
	background-color: #f9f9f9;
}

.panel-heading {
	background-color: #f0ad4e;
	color: #fff;
	border-color: transparent;
}

.sidebar-header {
	font-size: 120%;
	letter-spacing: 2px;
}

.footer {
	color: #666;
	background-color: #222;
	padding: 17px 0 18px 0;
	border-top: 1px solid #000;
}

.footer a {
	text-decoration: none;
	font-size: 160%;
	color: #999;
}

.footer a:hover {
	text-decoration: none;
	color: #fff;
}

@media (max-width: 767px) {
	.header h1 {
		font-size: 270%;
		letter-spacing: 3px;
		text-align: center;
	}

	.header p {
		font-size: 120%;
		letter-spacing: 1.5px;
		text-align: center;
	}
	
	.first-el {
		padding-top: 4%;
	}

	.nav-pills>li {
		font-size: 135%;
		line-height: 70%;
		float: none !important;
	}

	.nav-pills {
		text-align: center;
	}
}

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css">
	<script src="assets/js/jquery-3.5.1.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<title>Новые фильмы и сериалы - КиноМонстр</title>
</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="#">КиноМонстр</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 class="active first-el"><a href="#">Главная</a></li>
							<li><a href="#">Фильмы</a></li>
							<li><a href="#">Сериалы</a></li>
							<li><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-lg-9 col-lg-push-3">
					<h2>Новые фильмы</h2>
					<hr>
					<div class="row">
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/matrix.png" alt="Матрица - 1999">
							<div class="film_label">Матрица</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/inter.png" alt="Интерстеллар - 2014">
							<div class="film_label">Интерстеллар</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/cloud.png" alt="2012">
							<div class="film_label">Облачный атлас</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/max.png" alt="Безумный Макс: Дорога Ярости - 2015">
							<div class="film_label">Безумный Макс: Дорога Ярости</div>
						</div>
					</div>
					<div class="margin-8"></div>
					<h2>Новые фильмы</h2>
					<hr>
					<div class="row">
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/xfiles.png" alt="Секретные материалы - 1993">
							<div class="film_label">Секретные материалы</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/silicon.png" alt="Силиконовая долина - 2014">
							<div class="film_label">Силиконовая долина</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/dead.png" alt="Ходячие мертвецы - 2010">
							<div class="film_label">Ходячие мертвецы</div>
						</div>
						<div class="films_block col-lg-3 col-md-3 col-sm-3 col-xs-6">
							<img src="assets/img/breakingbad.png" alt="Во все тяжкие - 2008">
							<div class="film_label">Во все тяжкие</div>
						</div>
					</div>
					<div class="margin-8"></div>
					<div class="blog">
						<a href="#"><h3>Как снимали Интерстеллар?</h3></a>
						<p>45 лет исполнилось Кристоферу Нолану — одному из самых успешных режиссеров нашего времени, чьи работы одинаково любимы как взыскательными критиками, так и простыми зрителями. Фильмом изначально занималась студия Paramount. Когда Кристофер Нолан занял место режиссера, студия Warner Bros., которая выпускала его последние фильмы, добилась участия в проекте.</p>
						<a href="https://www.kinopoisk.ru/media/article/2621344/" class="btn btn-warning pull-right" target="_blank">Читать!</a>
						<div class="margin-8"></div>
						<a href="#"><h3>Актёр Том Хэнкс поделился впечатлениями от «Инферно»</h3></a>
						<p>В новом фильме по роману Дэна Брауна «Инферно» актер снова появляется в роли Роберта Лэнгдона, гения-символиста, который может найти множество ключей в мировой культуре, чтобы бороться с новой глобальной угрозой:  опасный вирус против перенаселенности может стереть половину планеты.</p>
						<a href="http://thr.ru/theatre/tom-henks-podelilsa-vpecatleniem-ot-inferno/" class="btn btn-warning pull-right" target="_blank">Читать!</a>
					</div>
				</div>
				<div class="col-lg-3 col-lg-pull-9">
					<div class="panel panel-info">
						<div class="panel-heading">
							<div class="sidebar-header">
								Поиск
							</div>
						</div>
						<div class="panel-body">
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<footer class="footer">
		<div class="container">
			<p class="text-center"><a href="https://twitter.com/spriterai">SpriterAI</a></p>
		</div>
	</footer>
</body>
</html>
bootstrap

1 ответов

1

Там через селектор > задается (в оригинале), у вас не хватает стиля тут .panel-info>.panel-heading, так должно быть:

.panel {
	border: none;
}

.panel-body {
	background-color: #f9f9f9;
}

.panel-info>.panel-heading {
	background-color: #f0ad4e;
	color: white;
	border-color: transparent;
}

Вот тут полный пример:

https://fructcode.com/ru/courses/bootstrap/interactive-main-page-panel-part-4/

Sign up or Log in to write an answer