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-wrap2 つの float を持つブロック要素<div>。

次のデモ フィドルを参照してください: http://jsfiddle.net/audetwebdesign/T9vqg/

例 1では、それぞれの幅を % で指定しています.floater。

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

この場合、ウィンドウを縮小すると、フローティング要素がオーバーラップします。これは、フローティング要素の幅が包含ブロック ( .row-wrap) の全体の幅によって決定され、幅と水平マージンの合計が 100% であるため、それらの定義によって常に収まるためです。この場合、改行のない長いテキストまたは表がコンテンツ オーバーフロー状態を引き起こす可能性があります。

例 2ではauto、フローティングの子要素の 1 つに幅を設定しました。

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

この場合、期待どおりの動作が得られます。ウィンドウを十分に狭くすると、2 番目の浮動要素が 2 番目の行に折り返されます。

ただし、最終的には、ウィンドウを十分に狭くして、要素をどのようにフロートさせてもオーバーフロー状態になるようにすることができます。

Twitter Bootstrap でこれを修正する

Bootstrap の経験は限られています。ただし、おそらく幅の広い行コンテナーを設定し、その中に左にフロートする 2 つの汎用 div を定義します。私の例に示されているように、いくつかのカスタム クラスを定義して動作を定義するだけです。

于 2013-05-23T15:39:11.950 に答える
0

何を探しているのか正確にはわかりませんが、テーブル セルを含むレスポンシブ レイアウトの場合、 を使用display:inline-blockすると、コンテナーに収まらないテーブル セルが次の行にプッシュされます。フィドルをチェックしてください。

于 2013-05-23T15:13:50.987 に答える