#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я пытаюсь поместить изображение логотипа веб-сайта mo в jumbotron. Но почему-то оно просто туда не помещается. Я прикрепил вывод в виде изображения. Вот результат: http://imgur.com/8ETxyjg
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The DreamShream Quiz has the best and most updated quiz questions on various categories. Visit now!" />
<meta name="keywords" content="general knowledge, quiz, quiz website, online quiz, politics quiz, programming quiz, general knowledge quiz, gk quiz, history quiz, general knowledge questions" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" />
<title>Welcome to Best Quiz Questions Website</title>
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse">
<div class="pull-right">
<button type="button" class="btn btn-success">
Login
</button>
<button type="button" class="btn btn-success">
Sign Up
</button>
</div>
</div>
<div class="jumbotron">
<div class="pull-left">
<img class="img img-responsive" src="images/logo.png" />
</div>
<div class="pull-right">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive -->
<ins class="adsbygoogle responsive"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxx"
data-ad-slot="6352682258"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="navbar navbar-default">
<div class="navbar-text pull-left">
<ul class="nav nav-tabs">
<li><a href="index.php">Home</a></li>
<li><a href="about-us.php">About Us</a></li>
<li><a href="contact-us.php">Contact Us</a></li>
<li><a href="privacy-policy.php">Privacy policy</a></li>
<li><a href="sitemap.php">Sitemap</a></li>
<li><a href="blog" target="_blank">Blog</a></li>
</ul>
</div>
</div>
Кроме того, реклама adsense не отображается на этой странице, хотя она отображается на страницах, которые я еще не начал внедрять в Bootstrap.
Прошу прощения за слишком много вопросов в одном вопросе, но все они во многом взаимосвязаны. Ранее я пытался использовать изображение и объявление между двумя навигационными панелями без jumbotron, но в этом случае вторая навигационная панель накладывала изображение. Любая помощь?
Ответ №1:
По этому изображению действительно трудно сказать, помогло бы, если бы вы установили что-то вроде chrome dev tools, но, глядя на него, я предполагаю, что изображение представляет собой прозрачный PNG, а вокруг логотипа есть большая прозрачная область, которую вы не видите, но она действует как поле,перенесите логотип в photoshop и обрезайте его соответствующим образом.
Комментарии:
1. Нет. Вокруг него нет большой прозрачной области .. Вот изображение. Ссылка
2. Если это так, это плавающая проблема, добавьте это в css jumbotron; Переполнение: скрыто;
3. Но это, очевидно, скрыло бы часть изображения, которая не помещается в jumbotron. Не так ли?
4. Нет, я всегда так думал. Но нет, на самом деле это не очень странно.
5. Если это не сработает, вам нужно будет переместить jumbotron div, добавив к нему float:left или, возможно, попробовав display:block.