Twitter Bootstrap div 在 768px 之外不可见

我开始学习Twitter引导程序，并创建了非常简单的布局。

当我更改浏览器的宽度

时，当浏览器的宽度低于 768px 时，'row 中的两个div 将变得不可见。否则，div 彼此重叠。

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

这是 plnkr。

将其

添加到 head 部分。由于更改浏览器的宽度超过一定数量，因此您需要两者的样式

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

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 列网格跨度上制作的，跨度12 将填充容器，但它将有余量。

如果您希望它完全穿过屏幕而没有边距，请不要使用 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。不妨学习最讨厌的版本，因为有些差异不会在版本之间转换。

相关内容

最新更新

热门标签：