web-dev-qa-db-ja.com

Bootstrapカルーセル画像が適切に整列しません

次の画像をご覧ください。bootstrapカルーセルを使用して画像を回転させています。ただし、ウィンドウの幅が大きい場合、画像は境界線と適切に整列しません。

ただし、bootstrapによって提供されるカルーセルの例は、ウィンドウの幅に関係なく常に正常に動作します。コードに従う。

カルーセルの動作が異なる理由を誰かが説明できますか？これは画像サイズと関係があるのですか、それともいくつかのbootstrap configがありませんか？

<section id="carousel">
<div class="hero-unit span6 columns">
    <h2>Welcome to TACT !</h2>
    <div id="myCarousel" class="carousel  slide" >
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="item  active" >
            <img alt=""  src="/eboxapps/img/3pp-1.png">
            <div class="carousel-caption">
                <h4>1. Need a 3rd party jar?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-2.png">
            <div class="carousel-caption">
                <h4>2. Create Request</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-3.png">
            <div class="carousel-caption">
                <h4>3. What happens?</h4>
            </div>
        </div>
        <div class="item">
            <img alt=""  src="/eboxapps/img/3pp-4.png">
            <div class="carousel-caption">
                <h4>4. Status is Emailed</h4>
            </div>
        </div>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>
</div>

carousel image

javascriptjquerytwitter-bootstrapcarousel
89
Nambi

解決策は、このCSSコードをカスタムCSSファイルに入れることです。

.carousel-inner > .item > img {
  margin: 0 auto;
}
156
atrepp

bootstrap 3では、レスポンシブクラスとセンタークラスを追加するだけです。

 <img class="img-responsive center-block" src="img/....jpg" alt="First slide">

これにより、画像のサイズ変更が自動的に行われ、画像が中央に配置されます。

編集：

bootstrap 4では、img-fluidクラスを追加するだけです

<img class="img-fluid" src="img/....jpg">
121
thouliha

私は同じ問題に直面し、この方法でそれを解決しました。画像以外のコンテンツをカルーセルに挿入することができるので、それを使用できます。最初にdiv.inner-item（中央揃えを行う場所）を挿入してから、このdiv内に画像を挿入する必要があります。

コードは次のとおりです（Ruby）：

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <%= image_tag "couples/1.jpg" %>
        </div> 
        <% (2..55).each do |t|%>
            <div class="item">
                <div class='inner-item'>
                    <%= image_tag "couples/#{t}.jpg" %>
                </div>
            </div> 
        <% end -%>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

そして私のcss-code（.scss）：

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}
18
vekozlov

vekozlov の答えはBootstrap 3で機能し、画像を中央に配置しますが、カルーセルを縮小すると壊れます。画像はカルーセルで縮小するのではなく、そのサイズを保持します。

代わりに、トップレベルのカルーセルdivでこれを実行します。

<div id="my-carousel" class="carousel slide"
    style="max-width: 900px; margin: 0 auto">
    ...
</div>

これにより、カルーセル全体が中央に配置され、画像の幅（つまり、900ピクセルまたは設定したいもの）を超えてカルーセルが大きくなるのを防ぎます。ただし、カルーセルを縮小すると、画像も一緒に縮小されます。

もちろん、このスタイリング情報をCSS/LESSファイルに入れる必要があります。

6
Daniel A.A. Pelsmaeker

試してみてください

    .item img{
      max-height: 300px;
      margin: auto;
    }
1
lala

私はあなたと同じ問題に直面しています。 @thulihaのヒントに基づいて、次のコードが私の問題を解決しました。

htmlファイルで、次のサンプルのように変更します。

<img class="img-responsive center-block" src=".....png" alt="Third slide">

carousel.cssで、クラスを変更します。

.carousel .item {
  text-align: center;
  height: 470px;
  background-color: #777;
}
1
Tung

それはあなたのスタイルと関係があるかもしれません。私の場合、親の「item」div内のリンクを使用しているため、スタイルシートを次のように変更する必要がありました。

.carousel .item a > img {
  display: block;
  line-height: 1;
}

既存のブーストコードの下で：

.carousel .item > img {
  display: block;
  line-height: 1;
}

私の画像は次のようになります：

<div class="active item" id="2"><a href="http://epdining.com/eats.php?place=TestRestaurant1"><img src="rimages/2.jpg"></a><div class="carousel-caption"><p>This restaurant is featured blah blah blah blah blah.</p></div></div>
1
Art L. Richards

私は解決策があると思う：

パーソナルスタイルシートページで、幅と高さをmatch画像のサイズに割り当てます。

上のスペースに適切なスパンを追加する別の「クラス」をそのトップdivに作成します...（以下に示す）

        <div class="span6 columns" class="carousel">
            <div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                <div class="item active">

Bootstrap.cssに触れることなく、独自のスタイルシートで、「カルーセル」（または選択した任意のラベル）を呼び出して、元のpixの幅と高さを一致させます。

.carousel       {
            width: 320px;
            height: 200px;

}

そのため、私の場合は、小さな320x200の画像をカルーセルに使用しています。おそらくbootstrap.cssにはあらかじめ設定された寸法がありますが、それを変更するのは好きではないので、将来のリリースで最新の状態を保つことができます。これが役立つことを願っています~~

1
rnaka530

あなたの画像は、span6として正確に460pxの幅を持っていますか？私の場合、画像サイズが異なる場合、画像に高さ属性を設定して、画像がすべて同じ高さであり、画像間でカルーセルのサイズが変更されないようにします。

あなたの場合、高さを設定して、この高さとカルーセル内部divの幅の比率が画像のaspectRatioと同じになるようにしてください

0
Seb Cesbron

カルーセルについては、すべての画像が正確に同じ高さと幅である必要があると思います。

また、ブートストラップからスキャフォールディングページに戻って参照すると、span16 = 940pxであると確信しています。これを念頭に置いて、私たちはあなたが持っていると仮定することができると思います

<div class="row">
     <div class="span4"> 
        <!--left content div guessing around 235px in width -->
     </div>
     <div class="span8">
        <!--right content div guessing around 470px in width -->
     </div>
</div>

そのため、行内のスパンスペースを設定するときは注意する必要があります。画像の幅が大きすぎると、divが次の「行」に送られてしまうからです。

リンク1

0
rnaka530

Bootstrap 4では、mx-autoクラスをimgタグに追加できます。

たとえば、画像の幅が75％の場合、次のようになります。

<img class="d-block w-75 mx-auto" src="image.jpg" alt="First slide">

ブートストラップは自動的にmx-autoを以下に変換します：

ml-auto, .mx-auto {
    margin-left: auto !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}
0
Hatef

@Art L. Richardsのソリューションはうまくいきませんでした。現在bootstrap.cssでは、元のコードは次のようになっています。

.carousel .item > img {
  display: block;
  line-height: 1;
}

@ rnaka530のコードは、ブートストラップの流動的な機能を破壊します。

良い解決策はありませんが、修正しました。ブートストラップのカルーセルの例を非常に注意深く観察しました http://Twitter.github.com/bootstrap/javascript.html#carousel 。

Imgの幅はグリッドの幅よりも大きくなければならないことがわかりました。 span9では、幅は最大870pxであるため、870pxよりも大きい画像を準備する必要があります。 imgの外側にさらにコンテナがある場合は、すべてのコンテナに境界線または余白があるため、幅の小さい画像を使用できます。

0
Kevin Tong

カルーセルがあるcss親divクラスにこれを挿入します。

<div class="parent_div">
     <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
              <div class="item active">
                <img src="assets/img/slider_1.png" alt="">
                <div class="carousel-caption">
                </div>
              </div>
            </div>
     </div>      
</div>

CSS

.parent_div { 
margin: 0 auto;
min-width: [desired width];
max-width: [desired width];
}
0
Jay Tiedra