Question

我正在尝试将内容DIV放在bootstrap轮播上。所以我尝试使用CSS位置。但仍然无法弄清楚这一点。

这是我的HTML -

<div id="homepage-feature" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-feature" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
        <img src="http://placehold.it/1500X600">
        <div class="container">
            <div class="carousel-caption">
                 <h1>Changes to the Grid</h1>

                <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                <p><a class="btn btn-large btn-primary" href="#">Learn more</a>
                </p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/1500X600">
        <div class="container">
            <div class="carousel-caption">
                 <h1>Percentage-based sizing</h1>

                <p>With "mobile-first" there is now only one percentage-based grid.</p>
                <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
                </p>
            </div>
        </div>
    </div>
  </div><!-- /.carousel-inner -->

  <!-- Controls -->
  <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    &lsaquo;
  </a>
  <a class="right carousel-control" href="#homepage-feature" data-slide="next">
    &rsaquo;
  </a>

  <div class="container">
    <div class="red"></div>
  </div>

</div><!-- /#homepage-feature.carousel -->

这是JSFIDDLE我当前的代码

有谁能告诉我如何解决这个问题？

谢谢。

Answer 1

这样的事情？ http://jsfiddle.net/LzdUa/131/

我刚用div =“red”：

删除了div周围的容器div

<div class="red"></div>

Answer 2

您申请红色框的CSS只是将其放置在容器内部，您需要定位容器本身。然后在媒体查询中添加额外的css，将其移动到较小屏幕尺寸的轮播下方。或者您可以添加一个额外的容器并将其隐藏在大屏幕上并在小屏幕上显示。

Bootstrap附带已经定义用于隐藏和显示的类，具体取决于设备大小，因此它可以节省您创建自己的媒体查询。

在这里看到http://www.bootply.com/DzwnA7zrw6#认为这就是你要找的东西。

要更新的代码位是

HTML：

<div class="container red-position hidden-sm hidden-xs">
      <div class="red"></div>
</div>
<div class="container visible-sm visible-xs">
      <div class="red"></div>
</div>

的CSS：

.carousel .red-position{
    position:absolute;
    top:0;
    right:0;
}

将内容DIV放置在bootstrap轮播上

2 个答案: