Question

当我的页面从SM重新调整为XS时，它会添加一条白线（几乎就像一个边距空间），我不知道为什么。如果我添加一个style =“margin-top：-1px”，它会消失，但会混淆网格结构的其余部分。关于是什么导致这个的任何想法？下面是代码，如果您运行代码段并缩小窗口，您将看到该行显示。

<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <title>JPT Email Template Title</title>
  </head>
  <body>
  <div class="container-fluid">

    <div class="row" style="margin-top: 20px">
      <div class ="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 bg-primary text-center">
        <img class="img-responsive center-block" src="http://pages.jerusalemprayerteam.org/rs/591-HWU-361/images/foz-logo.png" style="margin-top: 5px; margin-bottom: 5px">
      </div>
      <div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
    </div>

    <div class="row">
      <div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6 text-center bg-primary">
        <a href="#">
          <img class="img-responsive center-block" src="http://i.imgur.com/i131rzd.jpg" style="margin-bottom: 5px">
        </a>
      </div>
      <div class"col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>
    </div>

Answer 1

这种情况会导致您没有正确使用引导程序，您选择了为偏移添加额外divs的选项，这是错误的。对于这种情况，Bootstrap有offset：

<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
    Your content
</div>

请勿将这些额外的divs用于抵消，其中一个就是给你1px

Answer 2

列的最小高度为1px。所以下面创建了白线。请尝试使用.hidden-xs。

<div class="col-xs-0 col-sm-1 col-md-2 col-lg-3"></div>

Answer 3

除了之前的答案，Bootstrap还没有上课＆＃34; col-xs-0＆＃34;。

从col-sm到col-xs时，Bootstrap正在添加一条白线

3 个答案: