ブートストラップ4ベータコンテナは

私の現在のページを埋める次のようになります。私は、トップナビゲーションバーとフッターの間のdivコンテナをしたいhttps://i.imgur.com/Lnuf5sM.png ブートストラップ4ベータコンテナは

。緑のコンテンツはすべてdivです。

緑色のコンテンツの中央に中央揃えのボックスが必要です（ログインフォームになります）。ことは、私はそれを行う方法がわからないということです。

私が<nav>の下に<div>を作成している場合、navbarの背後にあるdiv（表示されません）。

これは私のコードとCSSです：

<!doctype html> 
<html lang="de"> 
<head> 
    <title>Login</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/style.css" /> 
</head> 
<body> 
<!-- Navigation --> 
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
    <a class="navbar-brand" href="#">Navbar</a> 
</nav> 

<div class="container"> 
    <div class="row"> 
     <div class="col-sm"> 
     Test 
     </div> 
    </div> 
</div> 



<!-- Footer --> 
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark"> 
    <a class="navbar-brand mx-auto" href="#">Footer</a> 
</nav> 


<!-- Javascript always on bottom --> 
... 
</body>

そして、これが私のCSS

body 
{ 
    background-color: #417239 
}

である私は、コンテナが表示されません。私のブラウザの開発者モードでは、divはここにあります： https://i.imgur.com/m6kgVae.png

なぜそれがnavbarの下にないのですか？緑色の内容（サイズ変更可能）をすべて満たす必要があります。緑色のコンテンツの中央にあるブロックをどのように作成できますか？（それで、私は「メイン」のdivが必要なのです）。

出典

2017-11-29 Luranis

は、Windowsをアクティブにすることを忘れないでください。D –

あなたは内のnavタグを配置してみましたcontainer-fluid class？コンテナのmargin-topをnavbarの高さに正確に追加します。 – karthik

@karthikはい。私はまた、nav + div + footerをコンテナクラスとコンテナ流体クラスのメインディビジョンに配置しようとしました。 – Luranis

.fixed-topと.fixed-bottomクラスので、あなたのコンテンツがnavの後ろに隠れます。あなたは、表示領域にコンテンツを移動するには、上からマージンを設定する必要があります。

#content { 
 
    margin: 100px auto; 
 
    text-align:center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Navigation --> 
 
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
 
    <a class="navbar-brand" href="#">Navbar</a> 
 
</nav> 
 

 
<div class="container" id="content"> 
 
    <div class="row"> 
 
     <div class="col-sm"> 
 
     Login Form 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<!-- Footer --> 
 
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark"> 
 
    <a class="navbar-brand mx-auto" href="#">Footer</a> 
 
</nav>

https://jsfiddle.net/wuzbj1w6/1/

出典

2017-11-29 14:02:11 kastriotcunaku

お返事ありがとうございます。しかし、私はdivを完全に中央に置くことができますか？体重だけでなく体重も体重に合わせる必要があります。今はそれ以上のものであり、完成したものではないからです。 – Luranis

https://i.imgur.com/G3E6mTj.pngこれはあなたのコードで今見たものです： '

\t \t \t

' – Luranis

@Luranisあなたはログインフォームの幅と高さが固定されているこのCSSを使用することができます：https://jsfiddle.net/wuzbj1w6/2/ – kastriotcunaku

チェックアウトhttps://v4-alpha.getbootstrap.com/examples/signin/。これはあなたが正しい方向に進むようにするはずです。

divはあなたのページの一番上のパディングをCSSで追加する必要があるため、navbarの下に座っています。

出典

2017-11-29 13:46:25 Taslack

しかし、なぜそれはちょうどそれの下に取得できませんか？（コンテナdiv）。そしてdivは利用可能なすべてのコンテンツを埋めなければならないので、完全に中心に置くことができます。この例では、全幅のみです。しかし、それは完全な高さでなければなりません（コンテナdiv）。ご覧のように。例Loginformは完全に中央に配置されていません（高さと幅）。それはもっと上です。 – Luranis

navbarはフローティングで、ページの上部または他の場所に固定されているため。だからあなたのページはそれがトップマージンを調整することを知らないだろう。 https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/をチェックし、https://getbootstrap.com/docs/4.0/components/navbar/ – Taslack

を読んでください。垂直アラインメントについては、この回答をご覧ください。 https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment – Taslack

@Luranisこれはあなたを助けるでしょう。ブートストラップ4ヘルパークラスを使ってdivを整列させてください。

<div className="container-fluid bg-dark"> 
     <div className="row h-100 justify-content-center align-items-center bgColor"> 
     <div className=" col-sm-6 col-md-6 col-lg-4 text-center"> 

      <form role="form"> 
       //form fields 
      </form> 
     </div> 
    </div> 
     </div>

出典

2017-11-29 13:58:27 karthik

@Luranisこれを試しましたか？ – karthik

いいえ、私は最初に試した良い解決策も見つけました。 – Luranis

np.私は解決策を見つけたことをうれしく思っています。 – karthik

ブートストラップ4ベータコンテナは

答えて

test

ブートストラップ4ベータコンテナは

答えて

test

関連する問題