具有选定边框的引导列网格

Question

我正在使用 Bootstrap 显示一行列。每列都有一个背景图像，一个边框，它们之间没有间隙。当列表有多于一列时，相邻列的边框会产生不希望的效果，看起来边框具有不同的宽度。这是发生的事情：

这是我需要实现的：

我的 HTML：

<div class="row">
    <div class="col-md-12">
        <div class="col-md-4 product" style="background: url(../img/product/prod_1.jpg) center;">
            <div class="container">
                <div class="overlay">                   
                </div>
            </div>
        </div>
        <div class="col-md-4 product" style="background: url(../img/product/prod_2.jpg) center;">
            <div class="container">
                <div class="overlay">                   
                </div>
            </div>
        </div>

        <!-- (...) -->
    </div>
</div>

我的 CSS/SCSS：

.product
{
    //how to resolve the border issue?
    border:2px solid $main-color-light;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    .container
    {       
    }
}

我怎样才能做到这一点？

重要提示：该行可以包含不确定数量的产品。

Answer 1

自从我第一次尝试以来，问题已经发生了变化，所以这里有一个新的、更简单的解决方案。

首先，我认为您错误地使用了 Bootstrap 网格。 .container 类已在 Bootstrap 中使用，因此您应该将内部元素重命名为新类。在下面的示例中，我使用了 .inner 类。

现在魔术，在你的情况下，你想要一个 2px 的边框。为了使每个元素周围保持一致，给每个元素一个margin: 0 -2px -2px 0; 这将导致元素边框在右侧和底部重叠，达到您想要的效果。

这适用于任意数量的元素，与您在一行中放置多少元素或总共有多少元素无关。

body {
  margin: 20px;
}

.container {
  margin-bottom: 40px;
}

.product {
  border: 2px solid black;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0 -2px -2px 0;
}

.inner {
  min-width: 200px;
  min-height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-md-3 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="inner">
        <div class="overlay">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

有几种方法可以做到这一点，一般的想法是在某些元素的几个选定边上删除额外的边框宽度。这是您的设置示例，其中您有 3 个元素的行。此设置将适用于任意数量的元素的行，唯一的要求是定位最后一行中的元素以将底部边框重新应用于这些元素。

这里发生了三件事：

1. 在所有元素的顶部、右侧和左侧（但不是底部）添加 2px 边框。
2. 仅在最后一行的元素底部添加 2px 的边框 (.row:nth-of-type(2) .product)。
3. 删除除最后一个元素之外的所有右侧边框 (.product:not(:last-child))。

.product {
  border: 2px solid black;
  border-bottom-width: 0px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.product:not(:last-child) {
  border-right-width: 0px;
}
// Should be `.row:last-child .product` but there's a bug with SO
.row:nth-of-type(2) .product {
  border-bottom-width: 2px;
}
.container {
  min-width: 200px;
  min-height: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-12">
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>

    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>

    <div class="col-xs-4 col-md-4 product" style="background: url(http://placehold.it/300x300) center;">
      <div class="container">
        <div class="overlay">
        </div>
      </div>
    </div>
  </div>
</div>

注意：有一个bug with the Stackoverflow snippet editor 阻止:last-child 工作。 .row:nth-of-type(2) .product 应该是 .row:last-child .product。