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>

OR

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

DEMO

Answer 2

这对我来说很有用，这应该会让6个图像紧密排列在一起。可以用于两个图像＆＃34; col-md-6＆＃34;或者＃34; col-md-4＆＃34;。为#ss;＃image-div .col-md-2＆＃34;制作CSS很重要。或＆＃34;＃image-div .row＆＃34;以便不在＃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>

Bootstrap背景图像网格

2 个答案: