如何删除 Twitter 中不需要的边距 Bootstrap

Question

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

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

移动优先

虽然其他答案都很好，但 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

How to remove unwanted margins in Twitter Bootstrap

html

css

twitter

margin

twitter-bootstrap

移动优先