引导网格列在内容重叠之前未堆叠

Question

我正在尝试并排显示电子邮件的详细信息（这只是整页的一部分）但是包含from / to和date / cc / bcc信息的行中的详细信息之前重叠很多页面调整大小时堆叠，我希望它们在出现此问题之前进行堆叠。以下是我所拥有的简化版本：

<div>
    <div class="row">
        <div class="col-xs-10">
            <span style="font-weight:bold;" data-bind="text:Subject"></span>
        </div>
        <div class="col-xs-2">
            <button class="btn btn-default" style="float:right; height:30px;">
                <img src="..." style="max-height:20px; border:none;" />
            </button>
        </div>

        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-2">
                    <div class="row">
                        <div class="col-xs-12">From: </div>
                        <div class="col-xs-12">&nbsp;</div>
                        <div class="col-xs-12">To: </div>
                    </div>
                </div>
                <div class="col-xs-10">
                    <div class="row">
                        <div class="col-xs-12">FromName</div>
                        <div class="col-xs-12">email</div>
                        <div class="col-xs-12">ToName</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-2">
                    <div class="row">
                        <div class="col-xs-12">Date: </div>
                        <div class="col-xs-12">Cc: </div>
                        <div class="col-xs-12">Bcc: </div>
                    </div>
                </div>
                <div class="col-xs-10">
                    <div class="row">
                        <div class="col-xs-12">date</div>
                        <div class="col-xs-12">Cc address</div>
                        <div class="col-xs-12">Bcc address</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<div>

Bootply Example

Answer 1

列重叠，因为col-xs-2对于其中的内容来说太小了：

<div class="col-xs-2">
    <div class="row">
        <div class="col-xs-12">From: </div>
        <div class="col-xs-12">&nbsp;</div>
        <div class="col-xs-12">To: </div>
    </div>
</div>

使用Dev工具检查包含From的<div class="col-xs-2">：以查看文本与内容区域重叠时是否小于文本长度。

要解决此问题，您可以更改col-xs-NUMBER以获取更大的NUMBER（尝试使用4）也更改详细列（如果您将前一个替换为4，则更改为8）。