0

我正在尝试从本教程引导程序库全屏开始自定义引导程序库全屏

编码：

<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">‹&lt;/a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›&lt;/a>
</div>
 </div>
  </div>

如您所见，包含“查看图库”按钮的类位于“项目”和“填充”类中

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

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

4

1 回答 1

1

要修复所有场景，如果您希望它位于右下角，则应从底部和右侧指定位置。

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

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

于 2013-10-16T16:06:59.493 回答