Question

我正在尝试使用这段html / css https://gist.github.com/ezersky/1484d936fd714f83074c作为行分隔符。然而;当我试图摆脱一个色谱柱并将其作为2并且25％/ 75％分裂时，它会出现故障并使其低于它并且分线器消失。另外，如何让线分割器不像现在那样靠近顶部，我希望顶部有一个间隙。

提前致谢。

Answer 1

以下是代码笔链接：http://codepen.io/saa93/pen/BQNBXB

我使用了你发布的同一段代码，删除了一列，使其成为col-sm-3（25％）和col-sm-9（75％）行。分隔符仍然适用于屏幕尺寸最小值：768像素。

希望这会有所帮助。

Html：

<div class="container">
    <div class="page-header">
        <h3>Add the (.grid-divider) class to any row to separate grid columns with equal height lines.</h3>
    </div>
    <div class="row grid-divider">
    <div class="col-sm-3">
      <div class="col-padding">
        <h3>Column 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima expedita incidunt rerum.</p>
      </div>
    </div>
    <div class="col-sm-9">
      <div class="col-padding">
        <h3>Column 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate placeat suscipit maxime tenetur officiis asperiores quae molestias fugiat praesentium dolorum.</p>
      </div>
    </div>

    </div>
</div>

CSS：

/* Tablet and bigger */
@media ( min-width: 768px ) {
    .grid-divider {
        position: relative;

        padding: 0;
    }
    .grid-divider>[class*='col-'] {
        position: static;
    }
    .grid-divider>[class*='col-']:nth-child(n+2):before {
        content: "";
        border-left: 1px solid #DDD;
        position: absolute;
        top: 0;
        bottom: 0;
    }
    .col-padding {
        padding: 0 15px;
    }
}

如何将列减少到两个？

1 个答案: