Bootstrap：如何使colspan包括内部水槽

Question

我是bootstrap的新手，我正在尝试熟悉网格布局，但我一直在寻找如何获得相当于“colspan”的东西来考虑列之间的空间。

如果你看看我在这里做了什么，你会看到我想做的事情：

https://jsfiddle.net/1t1L0kh2/1/

我的问题是我希望红色容器的大小固定（例如100px），绿色的容器是红色容器的两倍加上两个容器之间的空间，这可能会因为它基于bootstrap的网格而改变。

我设法让相关的尺寸工作：

https://jsfiddle.net/1t1L0kh2/2/

这对于绿色容器很好，但我不希望红色容器调整大小。

这是我的初始代码（小提琴1）：

HTML

<div class="container">
    <div class="text-center">
        <ul class="my-items">
            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

            <li class="col-lg-4 col-md-4 col-sm-4">
                <div class="lbox"></div>
            </li>

              <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>

              <li class="col-lg-2 col-md-2 col-sm-2" >
                <div class="box"></div>
            </li>
        </ul>
    </div>
</div>

CSS

body {
    margin: 10px;
}

.my-items {
    margin:0 0 0 0;
}

.my-items li {
    list-style: none;
    margin-bottom:10px;
}

.box {
        background: #f00;
    width: 100px;
    height: 100px
}

.lbox {
        background: #0f0;
    width: 200px;
    height: 100px
}

您对我如何实现这一点有任何想法吗？ 谢谢