Boostrap響應式設計網格問題

我在自舉4中構建了我的網站的前端。我想將我的一個頁面拆分爲四個背景圖像，每個背景圖像填充一列以便列堆棧響應移動。到目前爲止，我在下面的設計中使用了background-image屬性來填充每一列。儘管如此，圖像並沒有填滿整個專欄。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>

我加入的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

你能提供一個工作的jsfiddle給定？向我們展示你卡住的地方〜謝謝 –

您不必添加另一個<div>的.col-md-3內部，以便給它一個背景，而是你只能給同<div>類的.img-profile-1等。

引導程序4還增加了一個很酷的類來刪除每個.col之間的所有空白，它被稱爲.no-gutters。您可以在下面的剪輯中查看。

.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

相反的DIV設置寬度和高度在CSS中，嘗試添加類IMG流體的形象標籤。

來源

2017-04-20 01:41:50 cgodf

這裏是修復 如果添加COL-MD-3或bootstap任何其他列它採取正確的填充和15像素的左填充，使內的內容將不會覆蓋整個寬度。爲了覆蓋全寬，我們需要用類行添加列下面的另一個DIV，使內部的內容將被用來支付全寬

固定代碼如下

<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響應式設計網格問題

回答

相關問題