Question

Hello StackOverflow我有以下代码，这适用于bootstrap和Pixedelic相机：

<section id="slider" class="container-fluid">
<div class="row fluid">
    <div id="camera_wrap_1">
        <div data-src="content/images/slider1.png"></div>
        <div data-src="content/images/slider1.png"></div>
        <div data-src="content/images/slider1.png"></div>
    </div>

</div>

相机运行正常是蓝色图像，但我想在相机包装上取下这个盒子。喜欢这个

Image

白盒需要相对于4列bootstrap col-md-3对齐，但要超过相机的内容。蓝色是slider1.png是相机插件内容的一部分，而不是全宽图像。

Answer 1

这是一个自助式轮播的例子。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/carousel.js"></script>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="http://3.bp.blogspot.com/-bGl8UEECI8A/UH1o5UwxvdI/AAAAAAAABEg/L0iomiHX330/s640/old+bridge.jpg" alt="Ye olde bridge">
        <div class="carousel-caption">
          The old bridge
        </div>
    </div>
    <div class="item">
        <img src="http://bashooka.com/wp-content/uploads/2012/09/fantasy-landscape-15.jpg" alt="Elves land">
        <div class="carousel-caption">
          Elves landscape
        </div>
    </div>
</div>

  <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
</a>

</div>

如何通过bootstrap实现这一目标？

1 个答案: