Question

这里我有Bootstarp轮播的代码，它适用于所有不同的设备。

<div id="myCarousel" class="carousel slide" data-interval="3000">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="img/t1/p-banner1.jpg" alt="" />
        <div class="carousel-caption">
          <h3>Image 1</h3>
          <p>Image 1 Description</p>
        </div>
    </div>
    <div class="item">
      <img src="img/sizeimg/dal.png" alt=""/>
        <div class="carousel-caption">
          <h3>Image 1</h3>
          <p>Image 1 Description</p>
        </div>
    </div>
    <div class="item">
      <img src="img/sizeimg/url.jpg" alt=""/>
        <div class="carousel-caption">
          <h3>Image 1</h3>
          <p>Image 1 Description</p>
        </div>
    </div>
  </div>

  <!-- Controls -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>

  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

</div>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/lib/bootstrap.js"></script>

<script type="text/javascript">

  $(document).ready(function(){
      $('.carousel').carousel();
  });
</script>

现在，我怀疑的是，我如何添加一些内容，如按钮（登录，注册），这些内容在所有幻灯片中都很常见到旋转木马？它始终是幻灯片图像的中心，它也应该是响应式的。

按钮代码如下所示。这就是所有幻灯片上显示的静态内容。

<div class="container">
    <div class="btn-group" aria-label="...">
          <a class="btn btn-default" href="#" style="background:black;opacity: 0.5; color:white;">LOGIN</a>
          <a class="btn btn-default" href="#" style="background:black;opacity: 0.5; color:white;">REGISTER</a>
      </div>
  </div>

我尝试过不同的方式，它适用于大型设备，但不适用于小型设备，由于这些按钮，在移动设备中，转盘的右侧导航按钮无效。

感谢任何帮助。提前谢谢。

Answer 1

试试你的风格位置：静态;最佳：％;对：％; 按钮类

定位参考：http://www.w3schools.com/css/css_positioning.asp

如何向Bootstrap轮播添加静态内容？

1 个答案: