web-dev-qa-db-ja.com

Bootstrap position：absoluteのコンテナは内部のレイアウトを失います

最新のBootstrapバージョン3.3.2に対してウェブサイトを開発しています。私のタスクは、他のコンテンツの上に配置されるナビゲーションを作成することです（ホバーのシンプルロールオーバーメニュー）。 Bootstrap列を使用します。

。container-fluidを他のコンテナの上に配置するには、標準フローから削除する必要があります。 position：absoluteを使用する必要があります。これを。container-fluid（またはその周りのラッパー）に適用するとすぐに、幅が100％失われ、内部のレイアウト全体が失われます。

position：absoluteを。container-fluid（＃menu私の場合）、レイアウトを取得しますが、標準フローから削除されません。

この場合のみのJSFiddle： http://jsfiddle.net/q6v9wv31/

HTML：

<div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="container ontop">
    <div class="row">
        <div class="col-xs-6">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-6">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

CSS：

body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
}

プロジェクトの現在のバージョン： http://html.accuraten.com/ssc-html-dev/public/

このタスクを解決する方法を理解してください。

csstwitter-bootstrapcss-position
12
dandaka

位置を絶対に設定し、幅を100％にしたい場合は、左右のCSSスタイルを設定する必要があります。

HTML：

<div class="container first">
    <div class="row">
        <div class="col-xs-12">
            <p>Content here</p>
        </div>
    </div>
</div>
<div class="ontop container">
    <div class="row">
        <div class="col-xs-4">
            <p>Menu Item 1</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
        <div class="col-xs-4">
            <p>Menu Item 2</p>
        </div>
    </div>
</div>

CSS：

body {
    margin: 10px;
}
.first {
    height: 200px;
    background-color: #ddd;
}
.ontop {
    height: 100px;
    background-color: #d00;
    position: absolute;
    top: 100px;
    right: 0;
    left: 0;
}

左を変更：0および右：最初のコンテナと同じマージンを持たせたい場合は0〜10ピクセル。

絶対に配置された要素は、ドキュメント内にスペースを取得しません。これは、配置後に空のスペースが残らないことを意味します。その後、プロパティleft、right、top、bottomを使用してボックスを配置できます。

http://html.net/tutorials/css/lesson14.php#s2

34
jrarama