不能排成一排

Question

我连续有4列，但我无法将行放在中心位置。这太奇怪了...... 如果您查看底部的图片，您可以通过查看＆＃34;最常读＆＃34;下的垂直边框看到行未居中。蓝色方块。 html文件：

<div class="block-section">
  <div class="sm-section-wrapper">
    <div class="row">
      <div class="sm-preview-title">
        MOST READ  
      </div>
    </div>
    <div class="row">
      <div class="col-3">
        <div class="sm-preview-wrapper">
          <h3 class="preview-sm">
            hello world
          </h3>
          <h2 class="preview-sm">
            Vestibulum id ligula porta felis euismod semper.
          </h2>
        </div>
      </div>
      <div class="col-3">
        <div class="sm-preview-wrapper">
          <h3 class="preview-sm">
            hello world
          </h3>
          <h2 class="preview-sm">
            Vestibulum id ligula porta felis euismod semper.
          </h2>
        </div>
      </div>
      <div class="col-3">
        <div class="sm-preview-wrapper">
          <h3 class="preview-sm">
            hello world
          </h3>
          <h2 class="preview-sm">
            Vestibulum id ligula porta felis euismod semper.
          </h2>
        </div>
      </div>
      <div class="col-3">
        <div class="sm-preview-wrapper">
          <h3 class="preview-sm">
            hello world
          </h3>
          <h2 class="preview-sm">
            Vestibulum id ligula porta felis euismod semper.
          </h2>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的scss文件：

.sm-preview-wrapper{
  text-align: center;
  border-right: 1px solid $light-gray;
  padding: 0 35px;
}

.sm-section-wrapper{
  @include clearfix();
  .col-3{
    margin: 0;
    &:last-child{
      .sm-preview-wrapper{
        border-right: none;
      }
    }
  }
  padding-top: 50px;
  padding-bottom: 36px;
  .sm-preview-title{
    padding-top: 6px;
    text-align: center;
    height: 30px;
    width: 165px;
    margin: 0 auto;
    background: $blue;
    font-family: $montserrat;
    font-weight: bold;
    color: white;
    font-size: 14px;
  }
}

Answer 1

看看这个小提琴：http://jsfiddle.net/9v98r58s/

您正在使用.sm-preview-wrapper的边框，而不是其父级.col-sm-3，其填充为15px。

解决方案是使用：after for border

.sm-preview-wrapper:after{
            position:absolute;
            right:-15px;
            width:1px;
            top:0;
            bottom:0;
            content:'';
            background:red;
    }

Answer 2

我必须为第一个和最后一个孩子添加一个百分比余量来占据整个宽度并将其居中。