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>

ご覧のとおり、「View Gallery」ボタンを含むクラスは、「item」クラスと「fill」クラス内に配置されています。

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

グラフィック上の理由から、ボタンを画面の右下の固定位置に配置する必要がありますが、元のクラス内にとどめる必要があります。いろいろ試してみましたが、モバイル端末向けの可視化ではうまくいきません。たとえば、ボタンに適用されるこのクラスを使用して、iphone5 (640 x 1136) @media (最大幅: 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 に答える