0

Twitterブートストラップの最新バージョンを使用しています。

また、bootstrap-responsive.css も使用しています。

画像（額縁として）と、その画像の中央にカルーセル（ブートストラップで提供されるもの）を配置したいと考えています。しかし、私はそれらがレスポンシブにサイズ変更されることを望みます。

私がこれを行う典型的な方法は、カルーセルに position:relative を持たせ、画像に単純にオーバーラップさせることです。しかし、アクティブなサイズ変更では、これにより問題が発生します。

css を使用したメディア クエリ全体にとってまったく新しいものですが、これをどのように実現できるかについてのアイデアはありますか?

4

1 に答える 1

0

ブートストラップのカルーセルを使ってサイトを作るためにやったことは...

<div id = "myCarousel" class = "carousel slide">
      <div class = "carousel-inner">
            <!--each slide goes here-->
            <div class = "item active">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <div class = "item">
                  <img src = "your image here..." class = "img-responsive">
            </div><!--end itemactive-->
            <!--etc-->
      </div><!--end carousel-inner-->
</div><!--end carouselslide-->

次にCSSで、私は

#myCarousel
{
     background-image:url(your background image path here);
}

#myCarousel.carousel-inner
{
     width: 80%; /*carousel width size here - my example will use 80%, if you want the carousel to fill entire screen, then just remove this width element.*/
     margin-left: auto;
     margin-right: auto;
     /*These two margins are to center the carousel if you set a smaller width. :) */
}

ちなみに、bootstrap.min.cssを使用しました。

于 2014-06-03T04:49:54.420 に答える