Question

我设置了几行：

<div class="header row">
  <div class="small-4 small-offset-1 columns">
  left
  </div>
  <div class="small-7 columns">
  right
  </div>
</div>

<div class="content row">
  <div class="small-5 columns">
    left
    <ul>
    <li class="row">
      <div class="small-9 columns">list info</div>
      <div class="small-3 columns">list info</div>
    </li>
    <li class="row">
      <div class="small-9 columns">list info</div>
      <div class="small-3 columns">list info</div>
    </li>
    </ul>
  </div>
  <div class="small-7 columns">
    right
  </div>
</div>

我希望li行扩展其父.small-5列的整个宽度。

但是，我希望li s的内容 - .small-9和.small-3偏移整个屏幕宽度的1/12，与上面的标题行完全相同（ small-4 small-offset-1）。

这个小提琴可能有助于解释我尝试做的事情：https://jsfiddle.net/4tp87v60/15/

有人知道这是否可以通过基金会实现吗？

Answer 1

small-4类只有.small-offset-1来自8.33333%（100％/ 12）的保证金。

如果我理解正确，您只想偏移<ul>中的small-5。不幸的是，通过添加基础类可以做的最接近的是small-offset-3，它提供了margin-left: 25%。

但是，没有什么可以阻止您手动添加27.33333%的正确偏移量：

.small-5 ul {
  margin-left: 27.33333%;
}

我创造了一个展示这个here的新小提琴。

修改

为了简单地抵消<li>元素的内容，您只需稍微调整一下即可：

.small-5 ul .small-9 { padding-left: 25%; // Equivalent to three columns at 8.33333% }

可以使用here作为第二小提琴。

希望这有帮助！：）

基础：与外柱一样抵消内柱的方法？

1 个答案: