1

Bootstrap のプロジェクトで少し大きな問題があります。同じコードの 2 つのファイルがあります。ctr+a で元のファイルからすべてのコードを選択し、ctrl+c でコピーしてから ctrl+v で 2 番目のファイルに貼り付けます。

現在、Bootstrap 3 を使用しています。

結果は次のとおりです。

元のファイルは画像の下半分のもので、コピーは上半分のものです。両方のファイルは同じディレクトリにあります。コードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="shortcut icon" href="../../assets/ico/favicon.png"> -->

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/mainhardt.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="container">

    <!-- Static navbar -->
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Associació d'Amics de Mainhardt</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Inici</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Publicacions <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Revistes</a></li>
                        <li><a href="#">Llibres</a></li>
                    </ul>
                </li>
                <li><a href="#">Intercanvi</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Jornades d'Estudis Gaspatxers <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">I Jornades "El Carlisme a les nostres terres"</a></li>
                        <li><a href="#">II Jornades "Memòries al voltant d'una guerra"</a></li>
                        <li><a href="#">III Jornades "Retalls de cultura popular"</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gent d'ací <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Carme Vidal</a></li>
                        <li><a href="#">Jorge Julve</a></li>
                        <li><a href="#">Mar de fons</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Exposicions <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Eclipse 1905</a></li>
                        <li><a href="#">Cara a cara (Carme Vidal & Joan Sanz)</a></li>
                    </ul>
                </li>
            </ul>

        </div><!--/.nav-collapse -->
    </div>

    <!-- Main component for a primary marketing message or call to action -->
    <div class="jumbotron" style="background-color: #E3F6CE;">
        <img class="img-responsive" src="img/LOGO GRANDE.png"/>
    </div>
    <!--  Carousel -->
    <!--  consult Bootstrap docs at
          http://twitter.github.com/bootstrap/javascript.html#carousel -->
    <div id="this-carousel-id" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">
                    <img class="imagen-slider" src="img/slider/desembre2009.jpg" alt="Antennae Galaxies" />
                </a>
                <div class="carousel-caption">
                    <p>The Antennae Galaxies</p>
                    <p><a href="http://hubblesite.org/gallery/album/entire/pr2006046a/xlarge_web/npp/128/">Hubblesite.org &raquo;</a></p>
                </div>
            </div>
            <div class="item">
                <a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">
                    <img class="imagen-slider" src="img/slider/abril2010.jpg" alt="Carina Caterpillar" />
                </a>
                <div class="carousel-caption">
                    <p>Carina Nebula: The Caterpillar</p>
                    <p><a href="http://hubblesite.org/gallery/album/entire/pr2007016e/xlarge_web/npp/128/">Hubblesite.org &raquo;</a></p>
                </div>
            </div>
            <div class="item">
                <a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">
                    <img class="imagen-slider" src="img/slider/cartelljornadesgaspatxeres2.jpg" alt="Light Echo" />
                </a>
                <div class="carousel-caption">
                    <p>Light Echo From Star V838 Monocerotis</p>
                    <p><a href="http://hubblesite.org/gallery/album/entire/pr2003010i/npp/128/">Hubblesite.org &raquo;</a></p>
                </div>
            </div>
            <div class="item">
                <a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">
                    <img src="img/ngc5866.jpg" alt="Galaxy NGC5866" />
                </a>
                <div class="carousel-caption">
                    <p>Galaxy NGC 5866</p>
                    <p><a href="http://hubblesite.org/gallery/album/entire/pr2006024a/xlarge_web/npp/128/">Hubblesite.org &raquo;</a></p>
                </div>
            </div>
        </div><!-- .carousel-inner -->
        <!--  next and previous controls here
              href values must reference the id for this carousel -->
        <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
    </div><!-- .carousel -->
    <!-- end carousel -->
    <div class="separador"></div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h2>Quí som?</h2></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h2>Publicacions</h2></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h2>Intercanvi</h2></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="separador"></div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h3>Jornades d'estudis Gaspatxers</h3></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h2>Gent d'ací</h2></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
            <div class="thumbnail">
                <img class="img_small" src="img/Main%20trans.png" alt="...">
                <div class="caption">
                    <ul class="nav nav-tabs">
                        <li class="active"><h2>Exposicions</h2></li>
                    </ul>
                    <br>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="separador_grande"></div>
    <div class="jumbotron" style="background-color: #333333;">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-2 col-lg-3 contacte">
                <h4>Contacte</h4>
                <p class="contacte_info">
                    <img src="img/contacte.ico">  Associació d'amics de Mainhardt<br>
                    <img src="img/mail.ico"> correu@1and1.es<br>
                    <img src="img/tlf.ico"> tlf contacte<br>
                </p>
            </div>
            <!-- Formulari Contacte
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 contacte">
                    <h2>Formulari de contacte</h2>
                <form role="form">
                    <div class="form-group input-group-sm">
                        <label for="inputEmail1">Direcció e-mail</label>
                        <input  type="email" class="form-control" id="inputEmail1" placeholder="e-mail">
                    </div>
                    <div class="form-group">
                        <label for="inputName">Nom</label>
                        <input  type="text" class="form-control" id="inputName" placeholder="Nom">
                    </div>
                    <div class="form-group">
                        <label for="inputText">Missatge</label>
                        <textarea  class="form-control" rows="3" id="inputText" placeholder="Missatge"></textarea>
                    </div>

                    <button type="submit" class="btn btn-default">Envia</button>
                </form>
            </div>
            Fi Formulari Contacte -->
            <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 contacte">
                <ul class="nav navbar-nav contacte_info menu_abajo">
                    <li><h4>Inici</h4></li>
                    <li>
                        <h4>Publicacions</h4>
                        <ul>
                            <li>Revistes</li>
                            <li>Llibres</li>
                        </ul>
                    </li>
                    <li><h4>Intercanvi</h4></li>
                    <li>
                        <h4>Jornades Gaspatxeres</h4>
                        <ul>
                            <li>I Jornades</li>
                            <li>II Jornades</li>
                            <li>II Jornades</li>
                        </ul>
                    </li>
                    <li>
                        <h4>Gent d'aci</h4>
                        <ul>
                            <li>Carme Vidal</li>
                            <li>Jorge Julve</li>
                            <li>Mar de fons</li>
                        </ul>
                    </li>
                    <li>
                        <h4>Exposicions</h4>
                        <ul>
                            <li>Eclipse 1905</li>
                            <li>Cara a Cara</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="separador_grande"></div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 contacte">
                <p class="contacte_info copyright">Avís legal. Copyright </p>
            </div>
        </div>
    </div>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script>
    $(document).ready(function(){
        $('.carousel').carousel({
            interval: 4000
        });
    });
</script>
</body>
</html>

そして、これは私が行ったいくつかの変更を加えたcssです（mainhardt.css）

    body
{
    font-family: arial,helvetica,sans-serif;
    background-color: rgb(255, 252, 229);
}

.container
{
    background-color: #E3F6CE;
}
p{
    text-align: justify;
}

.img_small
{
    max-height: 100px;
    max-width: 175px;
}

.contacte
{
    color: #999;
}
.contacte_info
{
    font-size: 12px;
}
.copyright
{
    text-align: center;
}

.menu_abajo li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

.menu_abajo > li > ul > li
{
    display: block;
}

.separador
{
    margin-top: 30px;
    margin-bottom: 30px;
}
.separador_grande
{
    margin: 60px 0 60px 0;
}


.carousel-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 15px 5px;
    background: #333333;
    background: rgba(0, 0, 0, 0.75);
}

.carousel-caption h4,
.carousel-caption p {
    color: #ffffff;
}

.imagen-slider
{
    margin: 0 auto 0;
}

.carousel-inner
{
    background-image: url(../img/glyphicons-halflings-white.png);
}
4

1 に答える 1

1

2 番目の画像のアドレス バーを参照してください。2枚目の写真はズームアウトしています...

ズームインすると問題が解決します..

更新されたスクリーンショット

于 2013-10-14T17:16:43.583 に答える