3

TwitterBootstrapに問題があります。

レスポンシブレイアウトを実行しようとしていますが、2列の流動的な行があり、各列に2つのネストされた列があります（画像の最初の例）。

画面の小さいデバイスのふりをしてブラウザのサイズを変更しようとすると、一部の解像度では、ネストされた列を水平に配置するのに十分なスペースがあるにもかかわらず、ネストされた列が垂直に積み重ねられます（画像の2番目の例）。垂直方向（画像の3番目の例）。

ネストされた列を水平に配置するのに十分なスペースがある場合、ネストされた列が垂直に積み重ならないようにするにはどうすればよいですか？

これがjsfiddleです。

画像は以下の通りですここに画像の説明を入力してください

<div class="container">
<div class="row-fluid">
    <div class="span6">
        6
        <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>
    </div>
    <div class="span6">
        6
                    <ul class="row-fluid">
            <li class="span6">
                3
            </li>
            <li class="span6">
                3
            </li>
        </ul>

    </div>
</div>

</ p>

この問題の解決策が見つからなかったので、助けていただければ幸いです。

4

1 に答える 1

1

わかりました、私は問題を解決しました。これらの解像度では、li を float: left と width を 49% に変更しました。このような：

ul {
    width: 100%;
}

li {
    width: 49%;
    float: left;
}

おそらく、ブートストラップ/またはハードコーディングを変更せずにこれを行う方法があるはずです。

とりあえずありがとう！

于 2012-12-09T01:05:59.063 に答える