Question

我开始学习twitter bootstrap并创建了非常简单的布局。

当我更改浏览器的宽度时，当浏览器的宽度低于768px时，'row中的两个div变为不可见。否则div会相互叠加。

我想展示没有任何边距的div，最重要的是，可见！

这是plnkr。

Answer 1

你的div类在span和数字之间有一个空格。它应该更像是：

<div class="container">
    <div class="row">
        <div class="span12 red" style="height : 100px"></div>
        <div class="span12 green" style="height : 100px"></div>
    </div>
</div>

Bootstrap在12列网格上生成span12将填充容器，但它将有一个边距。

如果您希望它在屏幕上一直没有边距，请不要使用span或容器：

<div class="row">
    <div class="red" style="height : 100px"></div>
    <div class="green" style="height : 100px"></div>
</div>

当元素没有边距时，它将具有内容的容器：

 <div class=" red" style="height : 100px">
    <div class="container">
      <div class="row">
      <div class="span12 green" style="height : 100px"></div>
      </div>
    </div>
  </div>

  <div class="green" style="height : 100px">
    <div class="container">
      <div class="row">
         <div class="span12 red" style="height : 100px"></div>
      </div>
    </div>
  </div>

以下是plnkr示例

此外，如果您刚刚开始学习bootstrap，我建议您学习v3.0而不是v2.3.1。不妨学习最新版本，因为版本之间会有一些不同的差异。

Answer 2

将此添加到头部。因为改变浏览器的宽度超过了一个量，你需要一个两种风格

<!DOCTYPE html>
<html>

  <head>
  <style type=text/css>
  .container{
    width:100% !important;
    }
    .row div{
      width:100%;
      margin:0px !important;
      padding:0px !important;
      }
  </style>
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" />
    <link data-require="twitter-bootstrap@*" data-semver="2.3.1" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.css" />
    <script data-require="twitter-bootstrap@*" data-semver="2.3.1" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="span 3 red" style="height : 100px"></div>
        <div class="span 9 green" style="height : 100px"></div>
      </div>
    </div>
  </body>

</html>

现在div不会消失，当你调整大小时也没有边缘。

Twitter Bootstrap div超出768px不可见

2 个答案: