web-dev-qa-db-ja.com

Bootstrapのカルーセルを中央に配置し、応答性を高めますか？

カルーセル画像を中央（水平）に配置しますが、これはデフォルトではありません。 このトピック の解決策に従います。

ただし、このソリューションを使用すると、カルーセルのサイズが変更され、画像よりも小さくなると、デフォルトとしてスケーリングの代わりに画像がトリミングされます。

両方の画像を中央に配置し、カルーセルアイテムまで引き伸ばすにはどうすればよいですか？

htmlcssimagetwitter-bootstraptwitter-bootstrap-3
26
Luke Vo

今（Bootstrap 3および4で）それは単に：

.carousel-inner img {
  margin: auto;
}
63
Olivier

サイズの異なる画像があると思います。私はこれを自分でテストし、あなたが説明するように動作します（常に中央に配置され、画像の幅は適切に）

/*CSS*/
div.c-wrapper{
    width: 80%; /* for example */
    margin: auto;
}

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img{
width: 100%; /* use this, or not */
margin: auto;
}

<!--html-->
<div class="c-wrapper">
<div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/600x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
        <div class="item">
      <img src="http://placehold.it/500x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/700x400">
      <div class="carousel-caption">
        hello
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>
</div>

これは、可変の高さによる「ジャンプ」を作成します...それを解決するには、次のようなものを試してください： リストの最も高い画像を選択

または、メディアクエリを使用して、独自の固定高さを設定します。

33
Ryan

Boostrap 4では、カルーセル画像クラスにmx-autoを追加するだけです。

<div class="carousel-item">
  <img class="d-block mx-auto" src="http://placehold.it/600x400" />
</div>

bootstrap carousel documentation のサンプルと必要に応じて組み合わせます。

5
rox
.carousel-inner > .item > img {
    margin: 0 auto;
}

このシンプルなソリューションは私のために働いた

3
FrickeFresh

カルーセルhtmlコードの各画像にクラスを追加し、cssでmargin: 0 autoを適用します。

3
Escendrix

これを追加

.carousel .item img {
   left: -9999px;  /*important */
   right: -9999px;  /*important */
   margin: 0 auto;  /*important */
   max-width: none;  /*important */
   min-width: 100%;
   position: absolute;
}

そしてもちろん、親divの1つはposition：relativeを持っている必要がありますが、デフォルトで持っていると思います。

こちらをご覧ください： http://paginacrestinului.ro/

3
Adrian Cumpanasu

bootstrap 3：

#carousel-example-generic{
    margin:auto;
}
1
Vince2017

CMSの使用中にこれと非常に類似した問題が発生していましたが、上記の解決策では解決しませんでした。それを解決するために私がやったことは、該当するCSSに次のものを入れます：

background-size: cover

そして、ブートストラップを使用している場合の配置目的のために、私は使用しました：

background-position: center center /* or whatever position you wanted */
1
Joe Connor

カルーセルの画像に％で幅を与えてみてください？

.item img {
    width:100%;
}
0
Kevinvhengst

クラスコンテナ（<div class="carousel" id...>）を持つ別のdiv内に<div class="container"><div class="carousel" id="my-carousel">...</div></div>を配置しました。それも解決しました。

0
ArtFranco

上記の解決策はどれも私にとってはうまくいきませんでした。競合する他のスタイルがある可能性があります。

私にとっては、以下がうまくいきました。うまくいけば、他の人に役立つかもしれません。 bootstrap 4。

.carousel-inner img {       
   display:block;
   height: auto; 
   max-width: 100%;
}
0
Gabriel Gates

in bootstrap v4、iを中央に配置し、カルーセルimgを使用して画面に入力します

<img class="d-block mx-auto" max-width="100%" max-height="100%">

これには、親要素の高さまたは幅を設定する必要があることを確認してください

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
0
austin