Bootstrap Carousel被拉伸到頁面的整個寬度並鎖定在頁面頂部

Question

在這里，我在頁面中間有旋轉木馬，我希望它的寬度可以拉伸到頁面的整個寬度。 然后將其左上角和右上角鎖定在頁面的頂部。

這就是我提出的以下css。

.carousel{
   position: absolute;
   margin-bottom: 20px;
   line-height:1;
   top:0;
   left:0;
   min-width:100%;
   min-height: 500px;
}

.carousel-inner{
   width: inherit;
}

.carousel-inner > .item > img{
   min-width: 100%;
}

以上將給我我想要的結果。 但是我在這個結果中看到的問題是當你向下滾動頁面時，旋轉木馬會被“拖動”下來並最終重疊頁面的所有其他元素。 這是不必要的副作用，我試圖弄清楚什么是正確的css屬性，將我的輪播鎖定在頁面的頂部。

任何想法可能是什么？

PS：我使用的是Bootstrap 2，而不是3 - FYI。

Answer 1

.carousel{
   position: absolute;
   margin-bottom: 20px;
   line-height:1;
   top:0;
   left:0;
   min-width:100%;
   min-height: 500px;
   max-height: 600px; // ADD a max height, so it doesn't keep increasing when you scroll down
}

Answer 2

哈！

我發現為什么以上所有方法都不起作用！ 正如Khizer Najeeb上面的評論所暗示的那樣，我們懷疑某個地方有一個div標簽容器導致了這個問題而且他是對的！

在我的front-page.php文件中（因為我在Wordpress上構建了我的Bootstrap），我找到了以下代碼。

<?php get_header(); ?>

   <?php include('carousel.php'); ?>

   <div id="wrap">         
     <div id="main" class="container">

     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

     <?php the_content(); ?>

     <?php endwhile; else: ?>
     <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     <?php endif; ?>

     </div><!-- .container -->
   </div><!-- #wrap -->
<?php get_footer(); ?>

最后發生的事情是“wrap”和“main”div包圍了包含carousel.php的行。 我當時沒有想到這是我的旋轉木馬以我想要的格式顯示的主要罪魁禍首，直到我找到這個鏈接。 http://bootply.com/59900#並一點一點地測試我的css代碼，直到我知道我的旋轉木馬需要留在我的div標簽的邊界之外..

並且presto！ 所有固定和照顧！

多大的救濟！