Question

所以我第一次使用bootstrap，我在我的一个页面上调整旋转木马的大小，在主体中使用渐变背景，在内容部分使用重叠bg。

所以在第一个链接中我实现了相同的代码，但是当我垂直调整大小时，容器不会与内容重叠。

如何让第二个链接像这样，我仍然希望它能够针对不同的分辨率正确调整大小。我只是希望容器位于内容之下的固定位置。

http://thehedonistproject.com/launch/index.html

http://thehedonistproject.com/launch/trader-dans.html

<section class="slider" id="slider">
    <div class="carousel slide" data-ride="carousel" id="myCarousel">
        <!-- Indicators -->


        <ol class="carousel-indicators">
            <li class="active" data-slide-to="0" data-target="#myCarousel">
            </li>


            <li data-slide-to="1" data-target="#myCarousel">
            </li>


            <li data-slide-to="2" data-target="#myCarousel">
            </li>


            <li data-slide-to="3" data-target="#myCarousel">
            </li>


            <li data-slide-to="4" data-target="#myCarousel">
            </li>


            <li data-slide-to="5" data-target="#myCarousel">
            </li>


            <li data-slide-to="6" data-target="#myCarousel">
            </li>


            <li data-slide-to="7" data-target="#myCarousel">
            </li>


            <li data-slide-to="8" data-target="#myCarousel">
            </li>


            <li data-slide-to="9" data-target="#myCarousel">
            </li>
        </ol>
        <!-- Wrapper for slides -->


        <div class="carousel-inner" role="listbox">
            <div class="item active"><img alt="" src="img/photos/trader-dans/photo1.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo4.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo3.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo2.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo5.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo6.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo7.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo8.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo9.jpg">
            </div>


            <div class="item"><img alt="" src="img/photos/trader-dans/photo10.jpg">
            </div>
        </div>
        <!-- Left and right controls -->
         <a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-left"><span class="sr-only">Previous</span></span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span></a>
    </div>
</section>

Answer 1

我建议有效编辑bootstrap轮播，将文档示例文件夹while ($row = mysql_fetch_array($result)) { $hostname = $row['hostname']; $data[$hostname][] = array( 'id' => $row['id'], 'loadavrg' => $row['load average'] ); }中的样式表链接到您的html并编辑该样式表。由于您想要垂直调整大小，请在bootstrap\docs\example\carousel

中更改这三个的高度

carousel.css

这对我有用。

调整引导程序轮播的大小时出现问题

1 个答案: