4

ブートストラップを使用しています。私は3つのブロックを持つ行を持っています:

<div class="row">
    <div class="span3" id="B">...</div>
    <div class="span4" id="A">...</div>
    <div class="span3" id="C">...</div>
</div>

そのため、3 つのブロックはB、A、のように並べられCます。

画面幅が小さい場合、3 つのブロックはそれぞれ 1 行になり、 、B、Aのように並べられCます。

しかし、私はそれらを次のように注文したい

A
B
C

どうやってやるの？

4

4 に答える 4

5

これを試して：

<div class="row">
    <div class="pull-left">
        <div class="span4 pull-right" style="margin-left:0px;">A</div>
        <div class="span3 pull-left" style="margin-left:0px;">B</div>
    </div>
    <div class="pull-right">
        <div class="span3">C</div>
    </div>
</div>

間隔を少し調整する必要があるかもしれませんが、画面の幅が狭い場合に必要な正しい順序を提供する必要があります。

于 2013-04-06T06:00:43.540 に答える
0

私の答えは非常にシンプルで効果的で、スキルを必要としません。

HTML 構造を次のようにします。

<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>

今、あなたの<head>要素にこれを含めてください：

<link rel='stylesheet' type='text/css' media="all and (min-width:1024px)" href='bigdevice.css' />
<link rel='stylesheet' type='text/css' media="all and (max-width:1024px)" href='smalldevice.css'>

あなたのsmalldevice.cssで

.span1 {display:none;}

あなたのbigdevice.cssで

.span3 {display:none;}
于 2013-04-06T04:12:55.663 に答える
-1

それにアプローチする別の方法は、これを使用することです。

<html>
<head>
<style type="text/css">
@media all and (min-width: 1024px) {
.span3 {display:none;}
}
@media all and (max-width: 1024px) {
.span1 {display:none;}
}
</style>
</head>
<body>
<div class="row">
    <div class="span1" id="B">...</div>
    <div class="span2" id="A">...</div>
    <div class="span3" id="B">...</div>
    <div class="span4" id="C">...</div>
</div>
</body>
</html>
于 2013-04-06T04:22:13.550 に答える