1

私はTwitterのブートストラップ、特にカルーセル要素を学習して使用しようとしています。この目的のために、私はドキュメントの例を複製することができましたが、すべてが正常に見えます-期待どおりに機能します。私のサンプルHTMLカルーセルコードは次の場所にあります：http：//dpaste.com/772419/

ただし、私がやりたいのは、スライドを作成しないようにブートストラップに指示することです。むしろ、Amazonが製品を表示するのと同じように、3つすべての（存在する数の）画像を1行に表示します。ドキュメントを読みましたが、これを行う方法を理解できませんでした。

どんな考え、指導も大歓迎です。ありがとう。

4

1 に答える 1

2

過去にブートストラップを使用した経験から、このHTML構造を使用しました。したがって、1つのスライドに複数の画像をロードするだけでよいと思います...以下のように。

<div class="carousel">
      <div class="carousel-inner">

    <!-- your slide -->
         <div class="item active">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>

         </div> 
    <!-- end slide -->

    <!-- your slide -->
         <div class="item">
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
                <div class="product">
                    <img src="" alt="" />
                    <p>this is a caption</p>
                </div>
         </div> 
    <!-- end slide -->

      </div>

</div>

基本的に、タグITEMが付いた各DIVはスライドです。そしてACTIVEは最初のスライドを決定します。

編集

さて、私はあなたの問題を再現しようとして少しローカルでそれをいじりました。キャプションの問題は、bootstrap.cssファイルのCSSが原因である可能性が高いようです。これがコードです...

.carousel-caption {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 10px 15px 5px;
background: #333;
background: rgba(0, 0, 0, 0.75);
}

ここでの問題は、キャプションがアイテムコンテナの下部に配置されることです。したがって、1つしか表示されない理由は、position：absolute; それらをすべて互いに重ね合わせます。したがって、ほとんどの場合、探しているものを取得するには、このCSSを微調整する必要があります。

また、注意： TwitterブートストラップCSSを変更したくない場合は、bodyタグにクラスを追加し、疑似クラスを使用してブートストラップCSSを上書きできます。

画像を列に表示する方法：

画像の列を作成するには、次のような構造を作成できます...

HTML

<!-- product one -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product two -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>


<!-- product three -->
<div class="product-container">
    <img src="" alt="" />
    <div class="carousel-caption">
        <h4>Something For Sale</h4>
       <p>Some description</p>
    </div>
</div>

CSS

.product-container {
   width:33%;
   float:left;
}

.product-container img {
  margin:0 auto 0 auto;
}

それはとにかくあなたを球場に連れて行くはずです...それは少し微調整する必要があるかもしれません。

于 2012-07-19T00:25:31.230 に答える