1

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

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

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

这是plnkr。

4

2 回答 2

0

您的 div 类在跨度和数字之间有一个空格。它应该更像：

<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示例

此外，如果您刚开始学习引导程序，我建议您学习v3.0而不是 v2.3.1。不妨学习最讨厌的版本，因为版本之间存在一些差异。

于 2013-09-27T04:28:03.820 回答
0

将此添加到头部。因为改变浏览器的宽度超出了你需要两者的样式

<!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 不会消失，也没有边距。

于 2013-09-27T04:36:11.710 回答