javascript - 当所述元素不在容器中时，“填充”一些元素以与 Bootstrap 网格对齐？

Question

我需要沿着 Bootstrap 网格对齐一些元素，但不能以正常方式包含它们。示例标记是这样的:

<div class="container">
    <a class="thingIneedAligned"><a>
    <div class="100percentWidthWrapper">
        <ul class="col-md-12">
            <li>thing</li>
        </ul>
    <div>
    <a class="thingIneedAligned"><a>
</div>

(这个标记的原因很复杂，但它本质上是一个动画多层菜单，其中背景是整个浏览器宽度，但内容遵循 Bootstrap 网格。 anchor 标记显示为一个全 Angular div，而 ULs 滑动在下面)

这里的挑战在于，上面的 anchor 标记被设置为display: block 和float: left。我无法将它们“限制”到典型的 Bootstrap 容器中，因为我需要其他同级元素 (100percentWidthWrapper) 来拉伸(stretch)浏览器的整个宽度。

我能想到的唯一解决方案是基于 JS 的。计算 UL 到视口(viewport)的实际位置，然后在第一个 anchor 标记中添加适当的 left-margin 以匹配。

是否有内置方法来处理此 Bootstrap CSS 或自定义 CSS？还是 JS 才是正确的选择？

更新:

JSBin:http://jsbin.com/muzudaruha/1/

我需要顶部的绿色框与底部的绿色框对齐，但两者的父红色框都设置为 100%。 sibling 关系是这里的挑战。

Answer 1

试试这个:

将设置的宽度和自动居中的边距添加到您的菜单元素

.menu {
  border: 2px solid green;
  overflow: auto;

  width: 1140px;
  margin: 0 auto;
}

将 left: 0 添加到您的 secondarylevel-wrapper:

.secondarylevel-wrapper {
  position: absolute;
  top: 50px;
  border: 1px solid red;
  width: 100%;

  left: 0;
}

http://jsbin.com/mideruzehi/3/