Bootstrap.js Băng chuyền chỉ có văn bản

Question

Tôi làm theo this hướng dẫn tạo trang chiếu Carousel.

Khi tôi xác định mỗi mục chứa hình ảnh và đoạn như -

<div class="item"> 
    <img src="http://placehold.it/1200x480" alt="" /> 
    <div class="carousel-caption"> 
     <p>Caption text here</p> 
    </div> 
</div> 

nó làm việc tốt (here its jsFiddle).

Nhưng khi tôi giảm nó đến đoạn chỉ là -

<div class="item"> 
    <div class="carousel-caption"> 
     <p>Caption text here</p> 
    </div> 
</div> 

nó ngưng hoạt động (here its jsFiddle).

Làm cách nào tôi có thể làm cho nó hoạt động với chỉ đoạn văn bản như vậy là trượt văn bản mỗi chuyển đổi?

Answer 1

Thuộc tính position của .carousel-caption đã gây ra vấn đề, không có hình ảnh nó đi haywire, vì vậy đặt nó vào static:

.carousel-caption{ 
    position:static; 
} 

Đây là bản demo của nó làm việc cả hai có và không có image:

DEMO

Answer 2

See after removing image and leaving only paragraph

tôi đã cung cấp các lớp container hàng chiều rộng và chiều cao của hình ảnh với màu nền để div để chỉ ra sự hiện diện chỉ cần sao chép và dán đoạn mã này trong phần css fiddle và chạy để xem sự thay đổi

.item{ 
    height:480px; 
    width:1200px; 
    background-color:orange; 
} 

Answer 3

Cách dễ nhất đơn giản là làm cho hình ảnh có màu nền. Nếu bạn muốn có một cách sạch hơn để làm điều đó, bạn có thể có thể đạt được hiệu quả tương tự bằng cách sử dụng CSS.

Answer 4

tôi đã cùng một vấn đề. Câu trả lời này là giải pháp đơn giản nhất và tối ưu hóa cho vấn đề này: https://stackoverflow.com/a/25535930/4792775