Question

我设法创建了一个如下所示的页面：

<div class="container">
    <div class="row fullscreen">
        <div class="col-md-6 pink-panel">

        </div>
        <div class="col-md-6">

            <div class="row">
                <div class="col-md-12 gray-panel">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 orange-panel">

                </div>
                <div class="col-md-6 black-panel">

                </div>
            </div>

        </div>
    </div>
</div>

You can view it here

我遇到的问题是我希望每个面板（右侧和顶部）之间有一个小的余量。如果我添加上边距我会得到这个：

http://codepen.io/r3plica/pen/jPVQqy

你可以看到

使行不再排队，这不是我想要的。同样，如果我添加一个右边距，可以预见到我得到了这个：

http://codepen.io/r3plica/pen/NqbErr

现在我知道这两个问题的原因。我可以尝试编写一些JavaScript来帮助我解决问题，但我更愿意在纯CSS中解决这个问题。有没有人遇到过这个问题并解决了它？

Answer 1

你可以嵌套颜色面板

<div class="container">
    <div class="row fullscreen">
        <div class="col-md-6">
            <div class="col-md-12">
                <div class="pink-panel">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-md-12">
                    <div class="gray-panel">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="orange-panel">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="black-panel">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/0z76regv/

Answer 2

你必须记住，bootstrap使用特定的边距和填充作为其布局（例如行类的负边距）要以所需的方式拟合元素，你应该记住每个col- *块的宽度都以百分比形式描述。

我建议两种解决方案：

如果您不介意将5px更改为任意值，则会超出列的默认百分比。你可以，例如将col-md-6类设置为仅使用其宽度的49.5％，保留边距为0.5％。

http://codepen.io/anon/pen/QbGJgp

.col-md-6 {
  width: 49.5%;
  margin-right: 0.5%;
}
.row {
  margin-bottom: 0.5%;
}

使用calc（）函数从适当的元素中减去上述5px。更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/calc，但此功能与旧版浏览器不兼容：http://caniuse.com/#feat=calc。

http://codepen.io/anon/pen/yNVQoz

.col-md-6 {
    width: calc(50% - 5px);
    margin-right: 5px; 
}

带边距的bootstrap rowspan

2 个答案: