web-dev-qa-db-ja.com

Bootstrap Carousel responsive？

ブートストラップのカルーセル内の画像を固定の高さで反応させる方法はありますか？私はすべてを試しました。また、img-responsiveを使用し、CSSでもすべて試してみました。

これが私のhtmlです

    <div class="item active">
      <img src="images/slide1.jpg" alt="First slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption" style="padding-bottom:90px;">
          <h1>Totes for all</h1>
          <p>Personalize your style</p>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

    <div class="item">
      <img src="images/slide2.png" alt="Second slide" class="img-responsive">
      <div class="container">
        <div class="carousel-caption">
          <div class="caption_background">
          <h1>Pattern it</h1>
          <p>Choose your favorite</p>
          </div>
          <p><a class="btn btn-lg btn-primary" href="#" role="button">View all</a></p>
        </div><!-- /.carousel-caption -->
      </div><!-- /.container -->
    </div><!-- /.item -->

  </div><!-- /.carousel-inner -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.myCarousel -->

これが私のCSSです

http://paste.ubuntu.com/7908633/

htmlcsstwitter-bootstrapcarousel
6
nattienatz

まず、Bootstrapが提供する機能、特にグリッドシステムとレスポンシブユーティリティを確認する必要があります。

ブートストラップ3.2.0-CSS

次に、適切な応答手順を実行するには、現在の画面サイズに応じて幅と高さの両方をサイズ変更可能にする必要があります。

さらに、StackOverflowで関連する質問を見つけることができます。たとえば、次のとおりです。

bootstrapカルーセル画像に反応しますか？

5
vdenotaris

このjqを試してください。ウィンドウの高さとして.carousel-innerが作成されます。ただし、navnbar、フッターなどの高さを忘れないでください。他のすべての要素/ divの高さ-.

function init_carousel() {
            H = +($(window).height() /* -height here  */); // or $('.carousel-inner') as you want ...
            $('.carousel-inner').css('height', H + 'px');
        }
        window.onload = init_carousel;
        init_carousel();
2
Daniel Leth

これを試してくださいbootsniphttp://bootsnipp.com/snippets/featured/simple-responsive-carousel これは、ブートストラップに役立つコピー貼り付けsnippetsに適したWebサイトです。

1
Akash

私はこれがパーティーに少し遅れていることを知っていますが、最近この問題が発生し、各アイテムに独自のIDを与え、CSSで背景画像として要素に画像を設定することでそれを克服しました...

<div id="header-carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div id="cazza1" class="item active">
    </div>
    <div id="cazza2" class="item">
    </div>
    <div id="cazza3" class="item">
    </div>
  </div>
</div>

そして、CSS：

#header-carousel {
  height: 240px;
}#cazza1 {
  height: 240px;
  background-image: url(/images/header1.jpg);
  background-position: center center;
  background-size: cover;
}#cazza2 {
  height: 240px;
  background-image: url(/images/header2.jpg);
  background-position: center center;
  background-size: cover;
}#cazza3 {
  height: 240px;
  background-image: url(/images/header3.jpg);
  background-position: center center;
  background-size: cover;
}
0
Andy Jacko