Question

如何防止过大的子内容在引导程序中破坏响应式布局？

我在bootstrap中有一个响应式布局。

但是我使用表来呈现表内容 - 这些表变得非常大。

    <div class="span8">
        text
        <table class="table table-bordered">
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
             <th> some</th>
        </table>
    </div>
    <div class="span4"> 
        text    <br/>
        <span style="background:#FF0000">text</span>
    </div>

我遇到的是，在较低分辨率下，表格大小大于托管表格的范围。

我希望跨度“增长”大小（至少直到它相当于span12），让行中的其他跨度下降到新行，这样看起来像

<div class="span12">
    text
    <table class="table table-bordered">
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
         <th> some</th>
    </table>
</div>
<div class="span4"> 
    text    <br/>
    <span style="background:#FF0000">text</span>
</div>

但仅限于低分辨率

然而，正在发生的事情是，因为内容大于跨度，我只是看到重叠。

我怎样才能避免这种情况发生？（见附件）

http://jsfiddle.net/uahVW/3/

Answer 1

行为来源

考虑以下通用HTML代码段：

<div class="row-wrap ex1>
    <div class="floater pane1">Some_long_text_that_is_not_breaking...</div>
    <div class="floater pane2">Some text that wraps nicely.</div>
</div>

和以下CSS（不是Bootstrap ...）：

.row-wrap {
    outline: 2px dotted lightgray;
    overflow: auto;
}
.row-wrap .floater {
    outline: 1px dashed red;
    float: left;
}

基本上，.row-wrap块元素有两个浮点<div>。

请参阅以下演示小提琴：http://jsfiddle.net/audetwebdesign/T9vqg/

在示例1 中，我为每个.floater指定宽度（％）：

.ex1 .pane1 {
    width: 70%;
}
.ex1 .pane2 {
    width: 29%;
    margin-left: 1%;
}

在这种情况下，缩小窗口时，浮动元素会重叠，因为它们的宽度由包含块（.row-wrap）的总宽度决定，根据它们的定义，它们将始终适合宽度的总和和水平边距是100％。在这种情况下，长的非破坏文本或表可以触发内容溢出条件。

在示例2 中，我将其中一个浮动子元素的宽度设置为auto。

.ex2 .pane1 {
    width: auto;
}
.ex2 .pane2 {
    width: 29%;
    margin-left: 1%;
}

在这种情况下，如果使窗口足够窄，则会得到预期的行为，第二个浮动元素会换行到第二行。

但是，最终，你可以使窗口变得足够窄，这样无论你如何浮动元素都会出现溢出情况。

在Twitter Bootstrap中解决此问题

我对Bootstrap的经验有限。但是，我可能会设置一个宽范围的行容器，并在其中定义两个浮动到左侧的通用div。只需定义一些自定义类来定义行为，如我的示例所示。

Answer 2

不完全确定您要查找的内容，但对于包含表格单元格的响应式布局，使用display:inline-block会将不适合容器的表格单元格推送到下一行。查看fiddle。

跨度中的内容大于跨度本身，导致列不在响应式布局中排列

2 个答案: