设置边框宽度

Question

我正在尝试使红色虚线边框适合我的行。目前边框不在行中，但是我希望行像这样位于行内：

我不确定是否可以控制边框的宽度？

.sbp-products-row {
    border-bottom:1px dotted red;
 }

<div class="sbp-item7">
      <div class="row sbp-products-row">
          <div class="col-xs-6 col-sm-6">
              <a href="#">
                  <img class="sbp-product-img" src="https://i.etsystatic.com/isla/aee233/24534674/isla_75x75.24534674_ozrbr80h.jpg">
              </a>
          </div>
          <div class="col-xs-6 col-sm-6">
              <h4><a class="sbp-product-title" href="#">Produkt</a></h4>
              <p>Produkt tekst</p>
          </div>
      </div>
</div>

Answer 1

看起来.sbp-products-row比.sbp-item7宽。您可以通过概述两个元素以在两个元素上使用CSS outline: 1px solid清晰地看到它们的宽度来验证这一点。

我会尝试将.sbp-products-row设置为width: 100%;，以使其是其父级宽度的100％。

您似乎也不想让红色边框线碰到容器的壁（.sbp-item7，所以我也要给.sbp-item7一些填充物-padding: 10px;

对这些元素的大小进行可见测试（临时）：

.sbp-products-row, .sbp-item7 {
    outline: 1px solid;
}

这些样式可能有效：

.sbp-products-row {
    padding: 10px;
}

.sbp-item7 {
    width: 100%;
}

另一位评论者建议使用负边距，您可以尝试这样做，但是负边距绝不是您的第一个攻击计划。