0

対処しなければならないポジショニングの問題があります。コンテナの div には 2 つの div があり、どちらも水平方向に互いの下に配置する必要があります。ただし、2 番目の div の配置に問題があります。

clear:both div 2 を追加すると、望ましい新しい行になります。ただし、clear:both margin: 0 auto; を使用する場合。動作しません。代わりに div を中央揃えにするために何を使用できますか?

HTML:

<div class="row-fluid">
    <div class="span6 offset3 text-center header">
        <h1>Title...</h1>
        <p>Text...</p>
    </div>
    <div class="span3 offset4">
        <form>
          ...
        </form>                 
    </div>
</div>

CSS:

.register .span3 {
    width: 270px;
    clear: both;
    margin: 0 auto;
}

出力：

- Without clear:both
 ____________________________________
|                                    |
|              ______       ______   |
|             |      |     |      |  |
|             | div 1|     | div 2|  |
|             |______|     |______|  |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |


- WITH clear:both
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|  ______                            |
| |      |                           |
| | div 2|                           |
| |______|                           |
|                                    |
|                                    |

- Desired output
 ____________________________________
|                                    |
|              ______                |
|             |      |               |
|             | div 1|               |
|             |______|               |
|              ______                |
|             |      |               |
|             | div 2|               |
|             |______|               |
|                                    |
|                                    |
4

2 に答える 2

1

私が理解しているように、Bootstrap のグリッド システムはフロートを使用して要素をページに配置します。

残念ながら、何かがある場合float: left;、margin: 0 auto;ページの中央に配置されません。左に浮きます。divが左からずれて表示される理由は、 offset-3/offset-4クラスが適用されているためです。

要素をページの中央に配置するにはdiv、Bootstrap のグリッド フレームワークの外に出て、独自のことを行う必要があると思います。

于 2013-08-27T11:25:27.170 に答える