2016-07-09 4 views
0

マージンを使用するように感じ、パディングはグリッド外に出てからすべてのデバイスで機能しないようにブートストラップグリッドを混乱させます。誰かがこれを明らかにすることができればそれはすばらしいでしょう。とにかく私はページ上のすべてを完全に中央に保つような方法で3つの自転車の画像から離れて左の矢印を得る問題があります。私はグリッドを乱していましたが、私が何をしても、左の矢印が最初の自転車のイメージから離れることはありません。参考までにスクリーンショットを参照してください。どんな助けもありがとうございます。 enter image description hereブートストラップグリッドでマージンとパディングを使用する

HTML

<!DOCTYPE html> 
<html ng-app='formApp'> 

<head> 
    <title>Bicycle App</title> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> 
    <link href="app.css" rel="stylesheet"> 

</head> 

<body> 
    <div class="header"> 
     <div class="container"> 
      <div class='row'> 

       <div class='col-md-12'> 

        <i class="fa fa-bicycle" aria-hidden="true"><span>&nbsp;{{"Bike Shop"}}</span></i> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="container"> 


     <div class="row"> 

      <div class="col-md-offset-3 col-md-6"> 
       <!-- end class not needed --> 
       <div class="chooseTitle"> 
        Choose Your Bicycle 
       </div> 
      </div> 
      </div> 
       <!-- you missed md from offset, end class not needed --> 
       <div class="products" ng-controller="BikeController"> 
        <div class="row"> 


    <div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div> 

        <div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3"> 
        {{product.manufacturer}} 
        <img id="bikePic" ng-src="{{product.image}}"> 
        </div> 
        <div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div> 
        </div> 



       </div><!--End controller--> 




    </div> 



    <script src="bower_components/angular/angular.js"></script> 
    <script src="app.js"></script> 
    <script src="bower_components/jquery/dist/jquery.min.js"></script> 
    <script src="bikeimageslider.js"></script> 
</body> 

</html> 

CSS

.header{ 
    font-style:italic; 
background-color:black; 
height:60px; 
color:white; 
font-weight:bold; 
font-size:40px; 


} 
.header .fa {font-style:italic; 
} 
.bikeSelector{ 
color:green; 
} 
.chooseTitle{ 

font-size:60px; 

} 

.products{ 
color: #1E90FF ; 
text-align:center; 
font-size:40px; 

} 
#bikePic{ 

height:100%; 
width:100%; 

} 
+0

枚この質問は役立ちます。http://stackoverflow.com/questions/18304619/how-do-i-space-these-images-inside-of-a-bootstrap-3-grid - システム、1つの答えは私が思っていたことを言います、あなたはimg-responsiveを試して、役立つかどうかを確認したいかもしれません。 – Katie

答えて

1
<img ng-src="images/leftarrow.png"> 

変更

<img ng-src="images/leftarrow.png" class="img-responsive"> 

にこれはあなたのイメージにmax-width: 100%;を追加するとを中断されませんレイアウト

つまり

は、あなたの問題は、私はむしろ、ナビゲーション要素の絶対位置を使用します:) NAVイメージが大きすぎるということです。 #leftArrow{ position: absolute; left: -40px; top: 50%; }

+0

それはすばらしい感謝をしました。だから、私は余白を左/右/上/下またはパディング - 左/右/上/下をブートストラップグリッドで使用しないでください。私はそれが問題を引き起こすように感じるので、 – user6680

+0

余りにもマージンを使うことができますが、これはモバイルでより多くの微調整が行われる原因になります。この場合の1つの方法は、すべての製品でdisplay:inline-blockを使用して.col-md-12です。 –

関連する問題