css - 在 Bootstrap 画廊全屏上更改按钮位置

Question

我正在尝试从本教程开始自定义 Bootstrap 库全屏 bootstrap gallery full screen

代码:

<div class="container fill">
  <div id="myCarousel" class="carousel slide">
   <div class="carousel-inner">
 <div class="item">    
  <div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
    <div class="container">
     <div class="carousel-caption">
          <h1>TITLE</h1>
          <p class="lead">Description</p>
        </div> 
    </div>
  <a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
  </div>
   </div>
     </div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
 </div>
  </div>

如您所见，包含“查看图库”按钮的类位于类“item”和“fill”中

<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>

出于图形原因，我必须将按钮放置在屏幕右下角的固定位置，但必须保留在原始类中。我试过各种方法，但我无法在移动设备的可视化上得到它。例如，我正在尝试使用应用于按钮的此类优化在 iphone5 (640 x 1136) @media (max-width: 768px) 上的查看:

.gallery-button {  
  text-align:right;
  background-color: transparent; 
  position: fixed;
  max-width: 100%;
  padding: 0 20px; 
  top: 350px; left:150px;
}

在纵向模式下会很好，但在横向模式下按钮会消失。好的，我该如何解决所有类型显示器的问题？谢谢

Answer 1

为了解决所有场景，如果你想在右下角，你应该指定从下到右的位置。

.gallery-button {
    position: fixed;
    bottom: 5px;
    right: 5px;
}

这应该可以解决所有屏幕尺寸的问题。