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

Question

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

<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