16

JSFiddle： http: //jsfiddle.net/ardave/8DR6n/3/ フルスクリーンJSFiddle：http: //jsfiddle.net/ardave/8DR6n/3/embedded/result/

ページの右下にこれらの3つのdivがあり、それぞれにテキスト付きのhtmlテーブルが含まれており、ほとんどのデスクトップ解像度ですべて正常に表示されます。

ただし、ウィンドウを水平方向に縮小したり、特定のモバイルデバイスで表示したりすると、テーブルの内容が重なり合ってしまいます。

この問題は、ウィンドウのサイズが979ピクセル未満であるのと同じように発生します。これは、タブレットサイズのbootstrap-response.cssメディアクエリと一致するため、これは関連していると確信していますが、方法や方法を理解するのに十分な知識がありません。どうして。

この問題は、上部のナビゲーションバーが消える幅とも一致しますが、繰り返しになりますが、方法や理由を十分に説明することはできません。

私が発見した他のおそらく有用なことは、ウィンドウのサイズが問題になるようにサイズ設定されている場合、Chromeの[要素]デバッガウィンドウでスパンまたはテーブル要素にカーソルを合わせると、テーブルがはっきりとわかることです。列は、テーブル自体のサイズを超えて、テーブルを含むspan4divのサイズを超えて拡張されます。

コンテンツが目に見えてオーバーフローすることは望ましくありません。これが現在の問題だと思いますが、オーバーフローを非表示にしたりスクロールしたりしたくありません。画面が狭くなりすぎたら、テーブル/スパン4が互いに積み重ねて応答するように強制されるまで、テーブルテキストを重複しないサイズのままにしておく必要があります。

どんな助けでも大歓迎です。

おそらく過剰に思えますが、SOは、jsfiddleへのリンクだけでなく、コード自体を含めることを望んでいると思います。そこで、ここに進みます（bootstrap.cssとbootstrap-sensitive.cssが参照されていると仮定します）

<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    <li class="nav-header">View All</li>
                    <li><a href="/Search/Search">View All</a>

                    </li>
                </ul>
            </div>
        </div>
        <div class="span9">
            <div class="hero-unit">
                 <h1>My Site Name</h1>

                <p>Introductory stuff</p>
                <p> <a class="btn btn-primary btn-large" href="/Home/About">About &#187;</a>

                </p>
            </div>
            <div class="container">
                <div class="row-fluid">
                    <div class="span4">
                         <h2>Newest Entries</h2>

                        <table class="table .table-bordered">
                            <thead>
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                    <th>Column 3</th>
                                </tr>
                            </thead>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>1/28/2013</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>12/4/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>11/9/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/31/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/31/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/30/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/17/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/15/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>9/29/2012</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>9/21/2012</td>
                            </tr>
                        </table>
                    </div>
                    <!--/span-->
                    <div class="span4">
                         <h2>Latest Stuff</h2>

                        <table class="table .table-bordered">
                            <thead>
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                    <th>Column 3</th>
                                    <th>Column 4</th>
                                </tr>
                            </thead>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>11/9/2012</td>
                                <td>10.0</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>11/7/2012</td>
                                <td>8.0</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>11/4/2012</td>
                                <td>10.0</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>10/11/2012</td>
                                <td>7.0</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>9/13/2012</td>
                                <td>9.0</td>
                            </tr>
                            <tr>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td> <a href="/stuff/stuff">Lots of stuff</a>

                                </td>
                                <td>9/6/2012</td>
                                <td>7.0</td>
                            </tr>
                        </table>
                    </div>
                    <!--/span-->
                    <div class="span4">
                         <h2>Needing Inputs</h2>

                        <table class="table .table-bordered">
                            <thead>
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                    <th>Column 3</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>1/28/2013</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>12/4/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>11/18/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>11/9/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>11/7/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>11/5/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>10/31/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>10/30/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>10/30/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                                <tr>
                                    <td>Here's a thing</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                    <td>10/18/2012</td>
                                    <td> <a href="/stuff/stuff">Lots of stuff</a>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--/span-->
                </div>
            </div>
            <div>
                <p></p>
                <p>Here's a big blob of text!</p>
            </div>
        </div>
    </div>
    <hr>
    <footer>
        <p>&copy; Some Company</p>
    </footer>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container-fluid">
            <div class="nav-collapse collapse"> <a class="brand" href="/">TheSiteName.com</a>

                <form action="/Search/Search"
                class="navbar-search pull-left" method="get">
                    <input type="text" class="search-query" placeholder="Search by Name" name="SearchQuery"
                    />
                </form>
                <form ReturnUrl="" action="/Account/ExternalLogin" class="navbar-form pull-right"
                method="post">
                    <button type="submit" name="provider" value="facebook" class="logonpartialextlogin"
                    title="Log in using your Facebook account">
                        <img src="/Images/facebook.png" />
                    </button>
                    <button type="submit" name="provider" value="twitter" class="logonpartialextlogin"
                    title="Log in using your Twitter account">
                        <img src="/Images/twitter-bird-white-on-blue.png" />
                    </button>
                    <button type="submit" name="provider" value="google" class="logonpartialextlogin"
                    title="Log in using your Google account">
                        <img src="/Images/google-icon.png" />
                    </button>
                </form>
                <form action="/Account/Register" class="navbar-form pull-right" method="get">
                    <button type="submit" class="btn">Register</button>
                </form>
                <form action="/Account/LogOn" class="navbar-form pull-right" method="post">
                    <input class="span2" type="text" placeholder="Email" name="UserName" />
                    <input class="span2" type="password" placeholder="Password" name="Password"
                    />
                    <button type="submit" class="btn">Sign in</button>
                </form>
            </div>
        </div>
    </div>
</div>

select属性を使用することはできません。代わりに、独自の属性を作成して<ul>要素で使用することができます。

多分これはあなたを助けるでしょう

最初にhtmlコード

<div id="language">Change Lang</div>
<ul id="lang">
    <li>
        <a href="" name="lang" data-val="de">
           <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/ad-icon.png"/>
        English</a></li>
    <li>
        <a href="" name="lang" data-val="he">
            <img src="http://icons.iconarchive.com/icons/famfamfam/flag/16/il-icon.png"/>
            Hebrew</a></li>
</ul>

次にjqueryコード

$("#language").click(function(){
   $("#lang li").slideToggle();
});

$("#lang li").click(function() {
    var url = location.href = "index.php?lang=" + $(this).find('a').attr("data-val");
   location.href =url;
});

私はプラグインなしでそれをしました。

data-val属性を作成したので、希望の言語を保存することに注意してください。そして私はjqueryコードを使用してこの属性を取得します

4

4 に答える 4

21

私はこのスレッドが数ヶ月前のものであることを知っていますが、誰かが同じような状況でうまくいった答えを投稿したときに本当に感謝していることも知っています。これが、ブートストラップ2と3で行った方法です。

.cw-table-list{
    margin:0px !important;
    table-layout:fixed;  
  }
  .cw-table-list td{
    padding-bottom: 0px !important;  
    overflow:hidden;
  }

お役に立てれば。けいれん

于 2013-08-07T00:08:58.307 に答える
10

style = "overflow：auto;"を適用できます。テーブルに水平スクロールバーを配置します。したがって、デザインは引き続き応答性が高くなります。コードに従ってください：

.table-scrollable{
    overflow: auto;
}

そして、それを親divで使用します。

<div class='table-scrollable'>
于 2013-05-05T22:44:35.790 に答える
3

テーブルのコンテナ要素をで割り当て、overflow: auto;テーブル自体をで割り当てますtable-layout: fixed; 

.ie-table-fix {
    overflow: auto;
}
.ie-table-fix > table {
    table-layout: fixed;
}
于 2014-10-09T16:44:38.367 に答える