图像不适合在jumbotron

时间:2014-06-16 10:20:43

标签: 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 个答案:

答案 0 :(得分:0)

很难从图像中看出来,如果你安装了像Chrome开发工具这样的东西会有所帮助,但看着它,我的猜测是图像是一个透明的PNG,周围有一个很大的透明区域。徽标,你看不到但它作为边缘,将徽标带入photoshop并相应地裁剪。