删除列和内容之间的间距

Question

我正在尝试将图像对齐到其父div框的最左侧。但是似乎存在一些间距问题，使我无法这样做。

使用float-left只能让我走这么远：

尝试向右浮动时，情况类似：

$ git init # creates repository
$ git commit --allow-empty -m'Initial empty commit' # creates empty commit

有什么想法吗？

Answer 1

从Bootstrap documentation：

  

列具有水平填充，可在各个列之间创建装订线，但是，您可以删除行的边距，并删除列上带有.no-gutter的列的填充。

尝试像这样使用.no-gutters类：

<section id="products-section">
  <div class="container">
    <div class="row no-gutters">
      <div class="col-lg-1"></div>
      <div class="col-lg-10 border-break-full">
        <div class="row no-gutters">
          <div class="col-lg-4 border-red">
            <img
              class="img-responsive float-right border-red"
              src="img/test-product.JPG"
              alt=""
            />
          </div>
          <div class="col-lg-8"></div>
        </div>
      </div>
      <div class="col-lg-1"></div>
    </div>
  </div>
</section>

*编辑

Answer 2

使用Flexbox：

   

<div class="col-lg-4 border-red d-flex justify-content-start"> <img class="img-responsive float-right border-red" src="img/test-product.JPG" alt=""> </div>
------------------------------------------------------------------------