Question

开始全屏自定义引导程序库

代码：

<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;
}

在纵向模式下会很好，但在lanscape中按钮会消失。好的，我怎样才能解决所有类型显示器的问题？感谢

Answer 1

要修复所有情况，您应该从右下方指定位置，如果您想要它位于右下方。

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

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

在bootstrap画廊全屏更改按钮位置

1 个答案: