Bootstrap背景圖像網格

Question

我開始使用bootstrap，學習教程等。我想構建一個只有圖像（很多）形成背景的頁面，它們之間沒有邊框和空格。 種馬賽克。

嘗試了很多東西，包括一些教程引導網格系統，但我沒有找到線索。

我發現了一些jQuery的東西，但使用bootstrap將是一個加號。 它能回應嗎？

<div class="container">
  <div class="row">
    <div class="col-lg-6"> 
      <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
     </div>
   </div>
 </div>

Answer 1

是的，它可以響應。

擺脫圖像之間的空間如果使用Bootstrap 3，它會更容易。 Bootstrap 3現在使用填充而不是邊距來創建css中的“裝訂線”。

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

然后只需將no-gutter添加到要刪除間距的任何行中：

 <div class="container">
  <div class="row no-gutter">
    <div class="col-lg-6"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
    </div>
    <div class="col-lg-6"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg" class="img-responsive" alt="Responsive image">
    </div>
  </div>
 </div>

使所有圖像處於相同的高度

img {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

無論寬度如何，圖像高度均為100％，以免拉伸圖像

img {
        position: relative;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
    }

好吧所以我的錯我使用了'.img'而不是'img'

現在你可以使用左拉類作為

<div class="col-lg-6 pull-left"> 
    <img src="http://www.streetartutopia.com/wp-content/uploads/2012/11/Street-Art-by-David-Walker-in-London-England.jpg"  alt="Responsive image">
</div>

要么

img {
    float: left;
    height: 200px;
    background-repeat: no-repeat;
    background-size: cover;
}

DEMO

Answer 2

這對我來說很有用，這應該會讓6個圖像緊密排列在一起。 可以是兩個圖像“col-md-6”或三個“col-md-4”。 為“＃image-div .col-md-2”或“＃image-div .row”制作css非常重要，這樣才能在＃image-div或你調用的任何內容中不影響頁面中其他網格中的這些類它。

CSS PART

<style>
    #image-div .row{
      margin-top:0px ;
      margin-bottom:0px ;
      margin-left:0px ;
      margin-right:0px ;
      padding-top:0px ;
      padding-bottom:0px ;
      padding-left:0px ;
      padding-right:0px ;
    }
    #image-div .col-md-2{
      margin-top:0px ;
      margin-bottom:0px ;
      margin-left:0px ;
      margin-right:0px ;
      padding-top:0px ;
      padding-bottom:0px ;
      padding-left:0px ;
      padding-right:0px ;
    }

  </style>

---

HTML PART

   <div class="row">
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
        <div class="col-md-2">image.jpg</div>
   </div>