1

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

我在引导程序中有一个响应式布局。

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

    <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/

4

2 回答 2

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。只需定义一些自定义类来定义我的示例中所示的行为。

于 2013-05-23T15:39:11.950 回答
0

不完全确定您在寻找什么，但对于带有表格单元格的响应式布局，使用display:inline-block会将不适合容器的表格单元格推送到下一行。看看小提琴。

于 2013-05-23T15:13:50.987 回答