Boostrapレスキューデザイングリッドの問題

私は自分のウェブサイトのフロントエンドをブートストラップ4に構築しています。自分のページの1つを4つの背景イメージに分割して、それぞれが列を塗りつぶして、。今のところ、各列を塗りつぶすために背景イメージ属性を使用するデザインがあります。しかし、イメージは列全体を満たすわけではありません。Boostrapレスキューデザイングリッドの問題

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
      <div class="img img-profile-1"> 

      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="img img-profile-2" > 

      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="img img-profile-3" > 

      </div> 
     </div> 
     <div class="col-md-3 text-center"> 
      <div class="img img-profile-4"> 

      </div> 
     </div> 
    </div> 
</div>

私は、各列内のdivに以下のCSSを追加して表示するために、完全な画像を得たが、私は、ビューポートを小さくする際に奇妙なスクロールの問題と白のスペースがあります。

.img-profile-1 { 
     background-image: url('../img/image.jpg') !important; 
     background-repeat: no-repeat; 
     background-position: center; 
     background-size: cover; 
     width: 100%; 
     height: 100%; 
     margin-left: -15px; 
     margin-right: -15px; 
    }

どのようにこの応答と対局のジレンマを対処するためのアイデアはありますか？ありがとう！

出典

2017-04-20 jsmiles43

以下の通りである全幅をカバーするために行われるように、コラム下のクラスの行に別のdivを追加する必要があり全幅をカバーするには、作業jsfiddleを提供することができ？リースでどこにいらっしゃったのか教えてください〜ありがとう –

代わりにあなただけのように.img-profile-1のクラスが同じ<div>を与えることができ、それを背景を与えるために.col-md-3内部の別の<div>を追加する必要はありません。

ブートストラップ4は、.colの間のすべての空白を削除するクールなクラスを追加します。.no-guttersと呼ばれます。下のスナップで見ることができます。代わりにdivのためにあなたのCSSで幅と高さを設定する

.img-profile-1, 
 
.img-profile-3 { 
 
     background-image: url('http://placehold.it/500/aaaaaa/000000'); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 
     height: 300px; 
 
    } 
 
    
 

 
.img-profile-2, 
 
.img-profile-4 { 
 
     background-image: url('http://placehold.it/500/000000/ffffff'); 
 
     background-repeat: no-repeat; 
 
     background-position: center; 
 
     background-size: cover; 
 
     height: 300px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<body> 
 
<div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
     <div class="col-md-3 img img-profile-1"> 
 
     </div> 
 
     <div class="col-md-3 img img-profile-2"> 
 
     </div> 
 
     <div class="col-md-3 img img-profile-3"> 
 
     </div> 
 
     <div class="col-md-3 text-center img img-profile-4"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
</body>

出典

2017-04-20 01:39:37 RBCunhaDesign

、画像タグにクラスIMG-流体を追加してみてください。あなたは内側のコンテンツがありませんカバー全幅となるように、それは右のパディングと15ピクセルの左パディングを取るCOL-MD-3またはbootstap内の他の列を追加する場合はここで

出典

2017-04-20 01:41:50 cgodf

は修正 です。私たちは、内部コンテンツは

固定コードが

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-1"> 

      </div> 
      </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-2" > 
      </div> 

      </div> 
     </div> 
     <div class="col-md-3"> 
     <div class="row"> 
      <div class="img img-profile-3" > 
      </div> 
      </div> 
     </div> 
     <div class="col-md-3 text-center"> 
     <div class="row"> 
      <div class="img img-profile-4"> 
      </div> 

      </div> 
     </div> 
    </div> 
</div>

出典

2017-04-20 01:52:42

Boostrapレスキューデザイングリッドの問題

答えて

関連する問題