Question

我不知道我哪里出错了。我想制作一个像响应式图像库一样的网格，垂直跨越4个图像。我遇到的问题是，当我这样做时，我会在屏幕右侧看到这个奇怪的空白区域。

我认为它与图像大小有关，或者我写下了错误的代码，或者我可能错过了一些CSS。如果你看小提琴，你使用垂直滚动条并向右移动，你会看到那个空白区域。我怎么摆脱它？我也在这里包含代码。

HTML：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrapper">
    <div class="row">

    <div class="col-md-3" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg" align="center">
    </div>

    <div class="col-md-3" align="center">
        <img class="img responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>

    <div class="col-md-3" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>

    <div class="col-md-3" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>

</div>
</div>


<footer id="copy">
<p>Copyright &copy; <i>Minimal Clothing 2017 &reg;</i></p>
</footer>

CSS：

#wrapper img {
width: 100%;    
}


#copy {
background-color: #161616;
padding: 25px;
text-align: center;
margin-bottom: auto;
color: white;
}

Answer 1

.row需要.container父级，否则左/右边距会混乱。虽然如果您希望.container为视口的全宽，请改用.container-fluid。

然后.col-*列具有默认填充，因此请删除它。

＆＃13;

#wrapper img {
  width: 100%;
}

#copy {
  background-color: #161616;
  padding: 25px;
  text-align: center;
  margin-bottom: auto;
  color: white;
}

.col-md-3.nopad {
  padding: 0!important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="wrapper">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3 nopad" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg" align="center">
      </div>
      <div class="col-md-3 nopad" align="center">
        <img class="img responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
      </div>
      <div class="col-md-3 nopad" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
      </div>
      <div class="col-md-3 nopad" align="center">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
      </div>
    </div>
  </div>
</div>


<footer id="copy">
  <p>Copyright &copy; <i>Minimal Clothing 2017 &reg;</i></p>
</footer>

＆＃13;

Answer 2

将width : 100%;添加到包含row类的div，并删除其边距margin: 0;。

Answer 3

Bootstrap为cols添加了天沟间距。你需要删除cols上的间距，你需要以下类：

CSS

__new__

HTML

 .grid-space-0 {
   margin-right: 0;
   margin-left: 0;
 }

.grid-space-0 {
    margin-right: 0;
    margin-left: 0;
}
.grid-space-0 .col-lg-6,
.grid-space-0 .col-lg-4,
.grid-space-0 .col-lg-3,
.grid-space-0 .col-md-6,
.grid-space-0 .col-md-4,
.grid-space-0 .col-md-3,
.grid-space-0 .col-sm-6,
.grid-space-0 .col-sm-4,
.grid-space-0 .col-sm-3,
.grid-space-0 .col-xs-6,
.grid-space-0 .col-xs-4,
.grid-space-0 .col-xs-3 {
    padding-left: 0;
    padding-right: 0;
}
.grid-space-0>div {
    margin-bottom: 0;
    padding-bottom: 0;
}

#wrapper {
   overflow: hidden;
}

https://jsfiddle.net/ps0zfap8/14/

Answer 4

你刚刚错过了它的结构，它是一个叫做容器的包装类，不要忘记包含行和 grid （col-sm- *，col -md- *，col-lg- *）类在您自己的内容之前。希望这能回答你的问题。

.container-fluid img {
  width: 100%;
}

#copy {
  background-color: #161616;
  padding: 25px;
  text-align: center;
  margin-bottom: auto;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3" align="center">
      <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg" align="center">
    </div>
    <div class="col-md-3" align="center">
      <img class="img responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>
    <div class="col-md-3" align="center">
      <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>
    <div class="col-md-3" align="center">
      <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/8e/c1/28/8ec1283fda885e1854b7dbcbd7b5a353.jpg">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <footer id="copy">
        <p>Copyright &copy; <i>Minimal Clothing 2017 &reg;</i></p>
      </footer>
    </div>
  </div>
</div>

如何解决此HTML间距问题？

4 个答案: