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个元素的行。此设置将适用于任意数量元素的行，但唯一的要求是将最后一行中的元素作为目标，将底部边框重新应用于这些元素。

这里发生了三件事：

将2px边框添加到所有元素的顶部，右侧和左侧（但不是底部）。
仅在最后一行（.row:nth-of-type(2) .product）的元素底部添加2px的边框。
删除除最后一个元素（.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。

带选定边框的Bootstrap列网格

2 个答案: