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

我试图找出如何在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似乎非常适合在整个断点处不断填充的设计。然而，当填充物必须改变或不存在时，我会对它应该如何工作感到困惑。我错过了什么

---

编辑：澄清问题

如果您想要全幅内容，您需要使用

容器流体

而不是

容器

如果您想要全幅内容，您需要使用

容器流体

而不是

容器
容器左/右填充15px（包括.container和.container流体），这一行的左右边距为负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>


同侧阴唇
容器的左/右边距为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>


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

请注意，由于它有嵌套的行，因此更为复杂，值得学习

演示：

HTML

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

请注意，由于它有嵌套的行，因此更为复杂，值得学习

演示：

HTML


我想我已经明白了（至少在我的头脑中）。基本上，为超小型设备（至少在我的头脑中）泄漏图像和内容是很容易的。基本上，为超小型设备泄漏图像和内容是很容易的（不要把它放在.container之外，但是像@cvrebert说的，把它放在里面。container fluid我更新了问题来澄清。不要把它放在.container之外，但是像@cvrebert说的，把它放在里面。container fluid我更新了问题来澄清。我不想要全宽的内容。我想要全宽的内容（或从一个边缘出血）仅在较小的设备和平板电脑上使用。否则，它具有左/右填充，因此不会接触浏览器。@skube引导程序没有专门用于此操作的任何内容。我不想要全宽内容。我想要全宽内容（或从一个边缘出血）仅适用于较小的设备和平板电脑。否则，它具有左/右填充，因此不会触碰浏览器的chrome。@skube Bootstrap没有专门用于此操作的任何内容。我知道我可以覆盖样式，从而删除填充。但是，我不需要在小型设备上填充，同时也为larg提供了一个固定宽度的容器e桌面。我想我在找出实现这一点的引导方法时遇到了问题。是的，没有内置的类，所以最好的方法就是使用媒体查询从您选择的断点下方的col和容器类中删除填充。我知道我可以覆盖样式，从而删除填充。但是r、 我不需要在小型设备上进行填充，同时也为大型桌面提供了一个固定宽度的容器。我想我很难找到实现这一点的引导方法。是的，没有内置的类，所以最好的方法就是使用媒体查询从breakp下面的col和container类中删除填充您的选择。也许我的问题不清楚。我希望较小设备的内容刷新到浏览chrome（边缘），而不是较大的设备。我想这只是我对引导的缺乏经验绊倒了我。也许我的问题不清楚。我希望内容刷新到浏览chrome（边缘）适用于较小的设备，但不适用于较大的设备。我想这只是因为我对引导程序缺乏经验而绊倒了我。
<div class="container">
  <div class="row">
    <img src="holder.js/100x100" alt="img flush on left edge for xs devices">
  </div>
</div>