Question

我正在Twitter bootstrap中建立一个网站。使用网格系统，我有2行4个图像，我分别给出了col-xs-12，col-sm-6和col-md-3类。为了在顶行和底行之间留有间隙，我给了顶行一个id，并在css中将其设置为img-responsive {margin-bottom: 30px}。这在桌面视图中很好，但是在较小的设备上，一旦图像堆叠在一起，它就会创建额外的空间。有没有办法使用媒体查询功能可以防止这个额外的边际？非常感谢，Jon。

Here is the link to my website

<div class="row" id="toprow">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image3">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image4">
            </div>
        </div>

        <div class="row" id="bottomrow">
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image7">
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3">
                <img src="images/about1_700x700.jpg" class="img-responsive" height="700" width="auto" alt=""/ id="image8">
            </div>
        </div>

Answer 1

是的，尝试这样的事情：

@media (max-width: 768px) {
            .col-xs-12{
                    margin: 0;
                    padding: 0;
            }
        }

必要时调整：）

Answer 2

Mobile First

虽然其他答案非常好，但Bootstrap是一个移动优先框架。这可能不应该是它自己的答案，但我觉得需要提一下。

添加到@ Majid的代码......

#toprow {
  margin-bottom: 30px;    
}

@media screen and (max-width: 768px) {
  #toprow {
    margin-bottom:0;    
  }
}

这样做很好。无论屏幕尺寸如何，边距都将设置为30px，然后移至移动屏幕。移动优先方法更像是......

@media screen and (min-width: 769px) {
  #toprow {
    margin-bottom: 30px;    
  }
}

请注意我们如何定位min-width，而我们不必设置两次保证金？我们在需要时添加它而不是覆盖现有规则。在很多情况下，这可以使您免于冗余代码，并使您的项目更容易维护。

如何删除Twitter Bootstrap

2 个答案:

Mobile First