0

ブートストラップレスポンシブを使用してWebサイトを作成しています。ページの中央には、多くのボックスを含む div があります。

要件は、

  1. 大画面では 1 行に 3 ボックスを配置し、中大画面では 1 行に 2 ボックスを配置し、小さな画面では 1 行に 1 ボックスを配置します。
  2. ボックスの幅 (すべてのボックスで同じ幅) は、div の幅全体を埋めるために常に最大化する必要があります。

問題は、それぞれの要件を満たすことはできますが、両方を満たすことはできません。

1つだけを満たすために、各ボックスに固定幅を指定し、左にフロートさせることができますが、ボックスのサイズは変更されません.

2つだけを満たすために、ボックスでブートストラップスパンクラスを使用できます（親divでrow-fluidを使用）。ボックスは常に解像度に応じてサイズ変更されますが、そうではありません。1 行あたりのボックス数は常に同じです。

1と2の両方を満たすにはどうすればよいですか？

4

1 に答える 1

2

ユニークなものを追加するclassかid、消したいボックスに追加してください..私のデモを見てください

この助けを願っています

注: 効果を確認するには、フィドルをスクロールして画面幅を広げます

アップデート

html

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box3"></div>
</div>

CSS

.wrapper {
    width:100%;
    float:left;
}
.wrapper div {
    float:left;
    width:22%;
    border:1px solid red;
    height:100px;
    margin:0 2% 0 0;
}

@media screen and (max-width: 368px){ 

    .wrapper div {
        width:45%;
        margin:10px 2% 0 0;
    }
}

動作デモ

于 2013-03-04T04:07:14.273 に答える