Проблеми с Bootstrap Carousel: изображенията не се преоразмеряват според размера на контейнера

Използвам Bootstrap на моя уебсайт. Моят уебсайт има две колони на екрана на работния плот: голяма област за моето съдържание и малка област от дясната страна за малко информация за предстоящи събития. Двете зони добре се преоразмеряват (стават по-малки), когато намаля браузъра си и в един момент най-дясната колона скача на дъното, точно както е предвидено отзивчивостта. На началната си страница използвам въртележката въз основа на този пример за w3schools. Проблемът е, че картината на въртележката никога не се преоразмерява според ширината на колоната, винаги остава същата. В примера с w3school можете да видите, че преоразмеряването на вашия браузър води до преоразмеряване на изображенията. Моят HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
    <link rel="stylesheet" type='text/css' href="/bg/Content/bootstrap.css" />
    <link rel="stylesheet" type='text/css' href="/bg/Content/bootstrap-datepicker.css" />
    <link rel="stylesheet" type='text/css' href="/bg/Content/NYC.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="/Scripts/bootstrap-datepicker.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <link href="/bg/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/bg#"></a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/bg/">Home</a></li>
                    <li><a href="/bg/Event">Agenda</a></li>

                    <li><a href="/bg/Photo">Foto&#39;s</a></li>



                    <li><a href="/bg/Contact">Contact</a></li>

                        <li><a href="/bg/Account/Login">Login</a></li>
                                    </ul>
            </div> <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="col-sm-8">


<header>
    <h2>Welkom</h2>
</header>



<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
            <li data-target="#myCarousel" data-slide-to="4"></li>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">

            <img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
            <div class="carousel-caption">
                <h2>Caption</h2>
                </div>
        </div>

            <div class="item">

                <img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
            <div class="item">

                <img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
                    <div class="carousel-caption">
                        <h2>Caption</h2>
                    </div>
            </div>
    </div><!-- /.carousel-inner -->

    <a class="left carousel-control" href="/bg#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="/bg#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->



            </div>


            <div class="col-sm-3 col-sm-offset-1">



<header>
    <h3>Vandaag</h3>
</header>


    <ul class="interestingevents">
        <li>
            <p class="posted">Niks te zien</p>
        </li>
    </ul>


<header>
    <h3>Komende evenementen</h3>
</header>

<ul class="interestingevents">

        <li>
            <a href='/bg/Event/showEvent?eventID=13'>
                <p class="posted">
                    zondag 8 maart 2015
                </p>

                        <img src="/Content/Media/logosailing40x40.png" />


                <p class="text">
                    Winterwedstrijd
                    </p>
                <br/>
            </a>
        </li>
        <li>
            <a href='/bg/Event/showEvent?eventID=20'>
                <p class="posted">
                    zaterdag 14 maart 2015
                </p>

                        <img src="/Content/Media/logogeneral40x40.png" />


                <p class="text">
                    Onderhoud infrastructuur
                    </p>
                <br/>
            </a>
        </li>
        <li>
            <a href='/bg/Event/showEvent?eventID=21'>
                <p class="posted">
                    zondag 15 maart 2015
                </p>

                        <img src="/Content/Media/logogeneral40x40.png" />


                <p class="text">
                    Onderhoud infrastructuur
                    </p>
                <br/>
            </a>
        </li>

</ul>




<header>
    <h3>Gepasseerde evenementen</h3>
</header>

<ul class="interestingevents">
        <li>
            <p class="posted">
                zondag 8 februari 2015
            </p>


                    <img src="/Content/Media/logosailing40x40.png" />


            <p class="text">
                <a href='/bg/Event/showEvent?eventID=12'>Winterwedstrijd</a>
            </p>
            <br />
        </li>
        <li>
            <p class="posted">
                zondag 18 januari 2015
            </p>


                    <img src="/Content/Media/logogeneral40x40.png" />


            <p class="text">
                <a href='/bg/Event/showEvent?eventID=17'>Ledenvergadering</a>
            </p>
            <br />
        </li>
        <li>
            <p class="posted">
                zondag 4 januari 2015
            </p>


                    <img src="/Content/Media/logosailing40x40.png" />


            <p class="text">
                <a href='/bg/Event/showEvent?eventID=10'>Winterwedstrijd</a>
            </p>
            <br />
        </li>
</ul>


            </div>

        </div>
    </div>




    <footer>
        <div id="copyright">
            <div class="container">
                <p>Created by </p>
            </div>
        </div>
    </footer>




<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

carousel html css twitter-bootstrap
person blubbiedevis    schedule 18.02.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Може би можете да опитате с връзките на Bootstrap CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Разгледайте уебсайта на Bootstrap.

person fructurj    schedule 18.02.2015
comment
aaargh, не си сериозен :) това го направи. явно трябва да съм се забърквал с местните CSS, или нямам най-новия, или нещо подобно... - person blubbiedevis; 19.02.2015