从2个相等的自举列中删除左/右填充，以使它们与上部div平等对齐

Question

我有两个相同的bootstrap列，位于另一个全尺寸列之下，如下所示：

我希望将第一列的左侧与上方DIV的左侧匹配，并将第二列的右侧与上方DIV的右侧相匹配，如下所示：

但是如果我从列中删除左右填充，则在小屏幕上堆叠时会产生问题。与右侧相比，第二列显示为远离左侧，如下所示：

.section-1 {
  padding-left: 0px;
}

.section-2 {
  padding-right: 0px;
}

我无法找到理想的方法来正确对齐它们（最左边/最右边）和上面的div，并且在堆叠时仍能得到正确的结果。

Here is the fiddle.

Answer 1

您可以做的一件事是为较小的屏幕尺寸编写媒体查询。

的内容

@media(max-width:599px)
{
  .section-1 {
  padding: 0px;
}

.section-2 {
  padding: 0px;
}
}

这是DEMO。根据你的意愿调整它被触发的值。

Answer 2

首先将.row类更改为 .row-fluid （删除左右填充）

删除css padding-left：0和padding-right：0

结果 (function(H) { H.wrap(H.Series.prototype, 'drawGraph', function(proceed) { // Now apply the original function with the original arguments, // which are sliced off this function's arguments proceed.apply(this, Array.prototype.slice.call(arguments, 1)); var arrowLength = 15, arrowWidth = 9, series = this, data = series.data, len = data.length, segments = data, lastSeg = segments[segments.length - 1], path = []; var lastPoint = null; var nextLastPoint = null; if (lastSeg.y == 0) { lastPoint = segments[segments.length - 2]; nextLastPoint = segments[segments.length - 1]; } else { lastPoint = segments[segments.length - 1]; nextLastPoint = segments[segments.length - 2]; } var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY)); if (angle < 0) angle = Math.PI + angle; path.push('M', lastPoint.plotX, lastPoint.plotY); if (lastPoint.plotX > nextLastPoint.plotX) { path.push( 'L', lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle) ); path.push( lastPoint.plotX + arrowLength * Math.sin(angle), lastPoint.plotY + arrowLength * Math.cos(angle) ); path.push( lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle), 'Z' ); } else { path.push( 'L', lastPoint.plotX - arrowWidth * Math.cos(angle), lastPoint.plotY + arrowWidth * Math.sin(angle) ); path.push( lastPoint.plotX - arrowLength * Math.sin(angle), lastPoint.plotY - arrowLength * Math.cos(angle) ); path.push( lastPoint.plotX + arrowWidth * Math.cos(angle), lastPoint.plotY - arrowWidth * Math.sin(angle), 'Z' ); } series.chart.renderer.path(path) .attr({ fill: series.color }) .add(series.group); }); }(Highcharts)); https://jsfiddle.net/qwkcmuL6/8/

<强> HTML

{{1}}

<强> CSS

{{1}}

Answer 3

您可以使用@media query执行此操作。

@media screen and (min-width:768px){
  .section-1 {
    padding-left: 0px;
  }

  .section-2 {
    padding-right: 0px;
  }
}

这是小提琴链接： https://jsfiddle.net/qwkcmuL6/7/

Answer 4

试试这个：

<div class="row">
    <!-- place two divs here -->
</div>