5

Bootstrap にはデフォルトの方法があります。または、行内の各スパンが 100% にならない 767px (モバイル) 未満でそれを行うように編集するにはどうすればよいですか? 私はちょうどそれらが 50% に行きたいと思っています ... たとえば、2 つのスパンを上下に並べるのではなく、並べて配置します。

前もって感謝します

4

3 に答える 3

3

この質問は古いことは知っていますが、この同じ問題の解決策を探しているときに出くわし、自分で見つけました。他の誰かがこのページを見つけた場合に備えて、ソリューションを投稿する必要があると思いました。

私の問題は、4 つの列 (4 つの span3 リスト項目) を持つ応答性の高い Bootstrap ページと、3 つの列 (3 つの span4 リスト項目) を持つ別のページがあることでした。767px 未満の場合は、両方とも 2 つの列になるようにしたかったのです。私の構造は、span12 内で行流体が数回繰り返される 4 列のページでは次のようになります。

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
            <li class="span3"></li>
        </ul>
    </div>
  </div>

3 列のページの構造は次のようになります。ここでも、span12 内で行流体が数回繰り返されます。

<div class="span12">
    <div class="row-fluid">
        <ul class="thumbnails">
            <li class="span4"></li>
            <li class="span4"></li>
            <li class="span4"></li>
        </ul>
    </div>
</div>

その構造は、サムネイルに関する Bootstrap セクションから取得されます。以下は、両方を 767px 以下の 2 つの列に変換するために追加した CSS です。

@media screen and (max-width: 767px) {
/* remove clear from each ul to stop them from breaking into rows */
ul.thumbnails::after {
    clear: none;
}

/* make the width of each span equal to 47% instead of 100%.
You could make it closer to 50% if you have no borders or padding etc. */
ul.thumbnails li[class*="span"]{
    width: 47%; 
    float: left;
}
    // select the second span in each row (ul) on the 3 column page
[class*="span"] .span4:nth-child(2),
    // select the first span in the even rows on the 3 column page
[class*="span"] .row-fluid:nth-child(even) .span4:nth-child(1),
    // select the even spans in each row on the 4 column page
[class*="span"] .span3:nth-child(even)
{
    float: right; //float them all to the right
}
}

同じ構造を使用していない場合は、これらのセレクターを調整する必要があります。それらは最も洗練されたセレクターでもありません。それらを機能させるとすぐに、私はもうそれらで遊ぶことを気にすることができませんでした. これが誰かに役立つことを願っています！

[編集] 私は実際にすべてのコードで、row-fluid ではなく fluid-row を使用していることに気付きました。ただし、fluid-row にはスタイルシートにルールがありません。

CSS で正しいセレクターを使用するフィドルへのリンク: http://jsfiddle.net/rUCgS/4/

于 2012-10-04T22:56:55.520 に答える
1

.row-fluid [class*="span"]内部の動作を単純に変更し、 を押し@media (max-width: 767px) { ... }たときに元に戻しましたmax-width: 480px。また、行の最初の 2 つのスパンにクラス.span-controlを追加して、両方のマージン左が削除されていることを確認しました。

このように見えるはずです

タグは jsfiddle には便利でした!importantが、スタイルシートでは必要ありません。

于 2013-01-30T17:06:19.427 に答える
0

2 つの span6 で行の代わりに行流体を試してください。

HTML:

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel='stylesheet' type='text/css' />
<div id='wrap' class='container'>
        <div id='row1' class='row-fluid'>
            <div id='box1' class='span6'>
               box1
            </div>
             <div id='box2' class='span6'>
                 box2
                </div>
        </div>
</div>

CSS:

#wrap{
    background-color:black;
    height:50px;
}
#box1{
        background-color:green;
}

#box2{
        background-color:red;
}

ここで確認してください

于 2012-08-30T20:55:12.907 に答える