부트 스트랩 4 베타 컨테이너는

내 현재 페이지는 다음과 같습니다 입력 : 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

윈도우 활성화하는 것을 잊지 마십시오을 –

당신이 내 탐색 태그를 배치하려고 했 D container-fluid class? 컨테이너에 margin-top을 navbar의 높이만큼 추가하십시오. – karthik

@karthik 예. 나는 또한 컨테이너 클래스와 컨테이너 유체 클래스를 가진 메인 div에 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/을 확인하십시오. 이렇게하면 올바른 방향으로 갈 수 있습니다.

CSS의 페이지 상단에 여백을 추가해야하기 때문에 div가 navbar 아래에 앉아 있습니다.

출처

2017-11-29 13:46:25 Taslack

그래,하지만 왜 그냥 그걸 받아들이지 않을거야? (컨테이너 div). 그리고 div는 사용 가능한 모든 내용을 채워야하므로 완전히 집중 될 수 있습니다. 이 예제에서는 전체 너비입니다. 하지만 전체 높이 (container div) 여야합니다. 보시다시피. Example 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

@ 루 라니 이것은 도움이 될 것입니다. 부트 스트랩 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

답변

test

관련 문제