96

次の画像を見てください。ブートストラップ カルーセルを使用して画像を回転させています。ただし、ウィンドウの幅が大きい場合、画像は境界線に正しく配置されません。

しかし、ブートストラップによって提供されるカルーセルの例は、ウィンドウの幅に関係なく、常に正常に機能します。コードに従ってください。

カルーセルの動作が異なる理由を誰かが説明できますか? これは画像サイズと関係がありますか、それともブートストラップ構成が欠落していますか?

<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>

カルーセル画像

4

13 に答える 13

162

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

.carousel-inner > .item > img {
  margin: 0 auto;
}
于 2013-03-27T13:59:04.357 に答える
128

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

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

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

編集：

img-fluidブートストラップ 4 では、クラスを追加するだけです

<img class="img-fluid" src="img/....jpg">
于 2014-08-22T18:37:12.830 に答える
18

私は同じ問題に直面し、この方法で解決しました。画像以外のコンテンツをカルーセルに挿入できるので、それを使用できます。最初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コード（.scss）：

.inner-item {
    text-align: center;
    img {
        margin: 0 auto;
    }
}
于 2012-12-17T23:07:53.910 に答える
6

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

代わりに、最上位のカルーセルでこれを行いますdiv。

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

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

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

于 2013-09-06T23:13:44.410 に答える
5

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

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

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

Bootstrap は自動的に次のように変換mx-autoされます。

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

.mr-auto, .mx-auto {
    margin-right: auto !important;
}
于 2019-04-06T10:45:55.510 に答える
1

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

あなたの場合、この高さとカルーセルの幅の比率が同じになるように高さを設定してみてください-内側のdivは画像のアスペクト比と同じです

于 2012-05-15T06:19:29.833 に答える
1

私には解決策があると思います：

個人のスタイルシートページで、画像のサイズに合わせて幅と高さを割り当てます。

そのトップ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にはおそらくプリセットのサイズがありますが、それを変更するのは好きではないので、将来のリリースで最新の状態を維持することができます。これがお役に立てば幸いです~~

于 2012-09-17T22:28:24.543 に答える
1

これを試して

    .item img{
      max-height: 300px;
      margin: auto;
    }
于 2016-06-28T14:18:16.740 に答える
1

私はあなたと同じ問題に直面しています。@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;
}
于 2015-08-20T18:02:24.497 に答える
1

それはあなたのスタイルと関係があるかもしれません。私の場合、親の "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>
于 2012-06-22T23:23:33.423 に答える
0

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

また、ブートストラップからスキャフォールディングページに戻ると、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が次の「行」に送られ、それは面白くないからです：P

リンク1

于 2012-09-18T16:23:01.577 に答える
0

カルーセルがある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];
}
于 2013-03-23T09:01:19.157 に答える
0

@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 の外側にさらにコンテナがある場合は、幅の狭い画像を使用できます。

于 2012-11-27T12:15:18.030 に答える