Bootstrap旋轉木馬其他內容

我想在個人項目中使用twitter引導輪播。到目前爲止，它運行得非常好，因爲我使用bootstrap主頁的示例。Bootstrap旋轉木馬其他內容

現在我想放置簡單的html內容而不是圖像。這個內容應該像圖片一樣旋轉。我放入的文字顯示在旋轉木馬標題中，我放入旋轉木馬標題的文字未顯示。

例子：

<div class="item"> 
     This is the text or html code i want to place 
     <div class="carousel-caption"> 
      <h4>Thumbnail label</h4> 
      <p>Carousel caption text<p> 
     </div> 
    </div>

有沒有辦法得到這個工作？也許theres是一種方式來宣佈一個白色的跨度說300 x 300像素，我可以放置一些內容。

你應該知道我在初學者水平。我現在正在學習html，css，js，mongodb，bootstrap，node.js.但現在這對我來說有點小了點。

千恩萬謝丹尼爾

來源

2012-08-11 Dan-De-Man

<head> 
    <style type="text/css"> 
    div.new_html_code { 
     width:150px; 
     height:100px; 
     min-width:150px; 
     min-height:100px; 
     max-width:200px; 
     max-height:100px; 
     overflow:hidden; 
     display:block; 
     border:1px solid red; 
    } 
    </style> 
</head> 
<body> 
<!-- 
some html stuff here, I am just giving the basic layout 
--> 
    <div class="item"> 
     <div class="new_html_code"></div> 
     <div class="carousel-caption"> 
      <h4>Thumbnail label</h4> 
      <p>Carousel caption text<p> 
     </div> 
    </div> 
</body>

如果更換HTML/CSS從旋轉木馬和無法糾正，找回原來的東西。然後慢慢開始替換你的代碼，並且要非常小心以下的CSS屬性，它們不僅幫助找到錯誤（如最有用的CSS邊框），而且還有助於阻止添加的新內容，從膨脹前一個（最大寬度/高度CSS屬性）。

密切注意下面的CSS-屬性：

 min-width:150px; 
     min-height:100px; 
     max-width:200px; 
     max-height:100px; 
     overflow:hidden; 
     border:1px solid red;

不要修改Z-指標和不透明度先與我上面已經給出，然後開始做複雜的東西的，如果你再問有一些懷疑和抱歉，我有更少的時間錯別字。

來源

2012-08-11 14:09:54 GLES

你好妮娜，這太棒了！:-)正是我在找的東西。有用。我會稍微修改一下。但現在我想我明白如何將自己的元素放置在這個網站上，儘管使用引導。但這是CSS :-)謝謝！ – 2012-08-11 14:18:41

也upvote我的答案，如果你覺得它有用：D – GLES 2012-08-11 14:25:19

我會，但我不能...因爲我需要一些聲譽... – 2012-08-11 14:26:40

你沒有關閉carousel-caption股利。可能是你的問題。如果您查看引導程序傳送帶的文檔，則在每個項目中使用圖像或文本沒有區別。

<div id="myCarousel" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
    <div class="active item"><p>1</p></div> 
    <div class="item"><p>2</p></div> 
    <div class="item"><p>3</p></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>

看看這段代碼中的jsfiddle行爲：http://jsfiddle.net/QYFa2/

來源

2012-08-11 13:15:34 Pigueiras

對不起！我通過將文本複製到問題中而失去了結束標記。我的源代碼有效。好的，我刪除了旋轉木馬標題，正如你所說，現在我可以看到我輸入的文字。問題是，整個網站都失去了它的「形式」。以下元素不會停留在他們的位置並破壞佈局。有沒有辦法避免它？謝謝 – 2012-08-11 13:25:49

也許我可以給它一個高和一個寄宿生或什麼。 – 2012-08-11 13:32:16

Rondell可能是一個用於顯示畫廊和不同內容的jQuery插件。

View Demo我已經使用這個插件它很容易使用，下載Source Code

來源

2013-11-05 18:15:56 user2957535

看起來像你趕時間，忘了發佈完整鏈接！ – Mutant 2014-01-07 20:12:51

（修復了缺失的鏈接） – rtpHarry 2014-08-06 15:36:05

的carousel-caption類是對你不好。如果你不想顯示圖片，並且你沒有問題，請不要使用它。將您的html內容定義爲標題甚至在語義上都是錯誤的。剛剛離開類路程，使用普通的div

<div> 
    <h4>Thumbnail label</h4> 
    <p>Carousel caption text<p> 
</div>

此外，這些光滑的陰影就會消失，然後。這很好，因爲我們不希望他們在純文本上（儘管他們在圖片上看起來不錯）。

來源

2014-08-27 19:58:58 schmijos

@GLES有一個非常簡單的方法來使用沒有任何圖像的旋轉木馬。其實。輪轉標題的位置屬性導致了問題。只需將它設置爲靜態

.carousel-caption { position:static; }

這裏是演示爲

Demo

來源

2014-10-07 15:18:06

只是刪除轉盤字幕類，一切都將是巨大的

來源

2017-11-24 01:16:38

Bootstrap旋轉木馬其他內容

回答

相關問題