Question

我试图弄清楚如何在Bootstrap 3的列网格中为小型设备而不是其他设备创建从视口的一个边缘流出的内容。我希望图像能够经过排水沟。我了解如果您想要全宽度内容，请将其放在.container-fluid内。但是如果你想让它从浏览器边缘流出更小的设备而不是更大的设备呢？

<div class="container-flud">
 <img src="holder.js/100x100" alt="This img ALWAYS bleeds from left edge">
</div>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="holder.js/100x100" alt="This img always has 15px left-padding">
    </div>
    <div class="col-md-6">Lorem ipsum dolor</div>
  </div>
</div>

我对网格系统或Bootstrap没有多少经验。对于在整个断点处具有恒定填充的设计，Bootstrap似乎很棒。但是，当填充必须改变或不存在时，我会对它应该如何工作感到困惑。我错过了什么？

编辑：澄清问题

Answer 1

如果您需要全角内容，则需要使用container-fluid代替container。

Answer 2

容器左/右有15px填充（包括.container和.container-fluid），它会被你的行左右偏移15px的负边距偏移。因此，要从特定列中删除填充，可以创建一个类，如：

.no-left-padding {
  padding-left: 0px;
}

<强> HTML：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 no-left-padding">
      <img src="holder.js/100x100" alt="This will have 15px padding on the right and no padding on the left">
    </div>
    <div class="col-md-6">Lorem ipsum dolor</div>
  </div>
</div>

Answer 3

到目前为止，这两个答案都很好。有一件事是更好地理解CSS并查看网格css。网格使用填充来制作排水沟。左侧和右侧的默认值为15px，然后.row的左右边距为负，等于此填充。您希望内容（如图像）与其他列齐平，但保持大小调整百分比。只需摆弄行和col - * - 填充和边距，并根据您的需要将它们粘贴在.container或.container-fluid内部或外部：

请注意，这是更精细的，因为它有嵌套行，需要学习。

DEMO：http://jsbin.com/yigomo/1

/* Flush Grid */
.row.flush-grid img {
    width: 100%;
    height: auto;
    float:left;
}
.row.flush-grid {
    margin-left: 0;
    margin-right: 0;
}
.row.flush-grid [class*="col-"] { padding:0;}
.row.flush-grid [class*="col-"].row { padding:0;margin:0;}

HTML

  <div class="col-sm-6">
    <img src="http://lorempixel.com/600/400/fashion" alt="">
  </div>

  <div class="col-sm-6 row">
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/nature" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/food" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/cats" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/business" alt="" ></div>
  </div>

</div><!--/.row.flush-grid -->

<div class="row flush-grid">
  <div class="col-sm-6 row">
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/animals" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/city" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/people" alt="" ></div>
    <div class="col-xs-6"><img src="http://lorempixel.com/300/200/sports" alt="" ></div>
  </div><!--/.row.flush-grid -->

  <div class="col-sm-6">
    <img src="http://lorempixel.com/600/400/transport" alt="">
  </div>

</div><!--/.row.flush-grid -->

Answer 4

我想我已经弄明白了（至少在我脑海里）。基本上，通过简单地省略col div，很容易为超小型设备（＆lt; 768px）而不是其他尺寸的图像和内容流血：

<div class="container">
  <div class="row">
    <img src="holder.js/100x100" alt="img flush on left edge for xs devices">
  </div>
</div>

Bootstrap将auto在视口大小小于768px时宽度容器。

不幸的是，我仍然没有针对平板电脑出血的解决方案（而不是针对台式机）。

Bootstrap 3.0处理边缘出血 - 调整排水沟

4 个答案: