如何将列减少到两个?

时间:2016-11-07 00:24:19

标签: html css twitter-bootstrap-3 line

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

提前致谢。

1 个答案:

答案 0 :(得分:0)

以下是代码笔链接: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;
    }
}