Блог

Главная - Вопросы по программированию - Изображение, не подходящее для jumbotron

Изображение, не подходящее для jumbotron

#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.