>source

간단한 "로그인"페이지를 만들고 싶습니다. 여기에서이 템플릿을 발견했습니다.https://www.codeply.com/go/GeBvYXxFKY

HTML :

<div class="d-flex align-items-center flex-column justify-content-center h-100 bg-dark text-white" id="header">
    <h1 class="display-4">Hello.</h1>
    <form>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Email" type="text">
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="text">
        </div>
        <div class="form-group">
            <button class="btn btn-info btn-lg btn-block">Sign In</button>
        </div>
    </form>
</div>
<div class="container" id="content">
    <div class="row h-100 mt-5">
        <main class="col-md-6">
            <h1>Content...</h1>
        </main>
    </div>
</div>

CSS :

body,html {
    height: 100%;
}

이것은 멋져 보이고 그에 따라 쉽게 조정할 수 있습니다. 하지만 "안녕하세요"라는 레이아웃이 정말 마음에 듭니다. 중앙 (가운데에 세로 및 가로로 정렬 됨)이 표시되고 왼쪽에는 열 공간과 양식의 9/12를 차지하고 나머지 3/12는 열 공간을 차지합니다.

하지만 열을 분리하려고 할 때마다 전체 화면이 사라집니다.

다음 문제는 "Content ..."가 표시되는 곳입니다. 페이지의 약 15 %를 차지하는 것처럼 보이는 영구적 인 바닥 글로 바꾸고 싶습니다.

내가 원하는 모양에 대한 대략적인 아이디어가 있습니다 (여기 내 꿈의 MS Paint 실현입니다).

내 생각은 이것이 전체 페이지가 될 것이므로 스크롤 할 수 없다는 것입니다.

이것을 봐 주셔서 감사합니다 :)


  • 답변 # 1

    당신의 h-100 수업 #content 실제 페이지를 엉망으로 만들 수도 있습니다.

    해당 코드에서 다음을 수행 할 수 있습니다.

    /* here missing or extra class */
    .screen {
      min-height: 100vh;
      /* or height or h-100 if already used with html & body */
      margin: 0;
    }
    .flex-grow-4 {
      flex-grow: 4;
    }
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="screen d-flex flex-column">
      <div class="d-flex align-items-center  justify-content-center flex-grow-4 bg-dark text-white" id="header">
        <h1 class="display-4 col-sm-4 col-md-9 text-center">Hello.</h1>
        <form class="col-md-3 col-sm-6  p-5">
          <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Email" type="text">
          </div>
          <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="text">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
      <div class="container flex-grow-1" id="content">
        <div class="row  mt-5">
          <main class="col-md-6">
            <h1>Content...</h1>
          </main>
        </div>
      </div>
    </div>
    
    

    또한 col-xx-xx clas를 드롭하고 최대/최소 너비를 양식에 설정합니다.

    /* here missing or extra class */
    .screen {
      min-height: 100vh;
      /* or height or h-100 if already used with html & body */
      margin: 0;
    }
    .flex-grow-4 {
      flex-grow: 4;
    }
    .minW-10em {
      min-width: 10em;
    }
    .maxW-25em {
      max-width: 25em;
    }
    /* end extra login page */
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
    <div class="screen d-flex flex-column">
      <div class="d-flex align-items-center  justify-content-center flex-grow-4 bg-dark text-white" id="header">
        <h1 class="display-4 col flex-grow-1 text-center">Hello.</h1>
        <form class=" p-5 minW-10em maxW-25em ">
          <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Email" type="text">
          </div>
          <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="text">
          </div>
          <div class="form-group">
            <button class="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
      <div class="container flex-grow-1" id="content">
        <div class="row  mt-5">
          <main class="col-md-6">
            <h1>Content...</h1>
          </main>
        </div>
      </div>
    </div>
    
    

  • 답변 # 2

    이 시도

    <div class="row d-flex justify-content-around">
    <h1 class="display-4 col-6">Hello.</h1>
    <form class="col-6">
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Email" 
             type="text">
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" 
            type="text">
        </div>
        <div class="form-group">
            <button class="btn btn-info btn-lg btn-block">Sign In</button>
        </div>
    </form>
    </div>
    
    

  • 답변 # 3

    body,html {
        height: 100%;
    }
    
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container col-12 d-flex justify-content-center align-items-center flex-row justify-content-center h-100 bg-dark text-white" id="header">
        <div class="col-9 d-flex justify-content-center">
            <h1 class="display-4">Hello.</h1>
        </div>
        <div class="col-3 d-flex justify-content-center">
            <form>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Email" type="text">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" placeholder="Password" type="text">
                </div>
                <div class="form-group">
                    <button class="btn btn-info btn-lg btn-block">Sign In</button>
                </div>
            </form>
        </div>
    </div>
    <div class="container" id="content">
        <div class="row h-100 mt-5">
            <main class="col-md-6">
                <h1>Content...</h1>
            </main>
        </div>
    </div>
    
    

  • 이전 Java에서 정렬 한 후 배열의 요소 색인 유지
  • 다음 python - "목록 할당 색인이 범위를 벗어났습니다"를 수정하는 방법은 무엇입니까?