부트 만 3에서 양식을 중앙에 배치하는 방법
로그인 양식을 중앙에 배치하고 있습니까? 부트 유효성을 사용하고 작동하지 않습니다.
내 코드는 다음과 달라집니다.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<h2>Log in</h2>
<div>
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</div>
간단한 방법은
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
당신에게 클래스 .container.Add width:xx %그것에 당신은 완벽 사업부를 중심으로 얻을 !
예 :
<div class="container center_div">
하지만 기본적으로 containerBS 중심에 안심 느니 다 !
부트에서이를 수행하는 간단한 방법이 있습니다. 페이지에서 div 센터를 기준으로 할 때마다 모든 열을 3 나눕니다 (총 부트로 열을 = 12, 3 번으로 나누기 >>> 12/3 = 4). 4로 나누면 3 개의 열이 나옵니다. 그런 다음 div를 중간 열에 넣습니다. 그리고이 모든 수학은 다음과 같이 수행됩니다.
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4는 4 개의 부트 열 중 하나의 열을 만듭니다. col-md-offset-4는 기본 열의 양쪽에 하나의 열 (4 개의 부트 부트 열 너비)을 추가합니다.
한 행의 총 열은 최대 12 개까지 더해야합니다. 따라서 col-md-4 col-md-offset-4를 수행 할 수 있습니다. 4 개의 개의 열로 거래가 나눕니다. 지금은 어떤 것이 6 인 4 열 양식이 있으므로 양식 오른쪽에 2 열만 표시됩니다. 또한 col-md-8 col-md-offset-2를 수행하면 왼쪽과 오른쪽 공백이 각각 2 열씩있는 8 열 형식 또는 col-md-6 col-md-offset-3 (6 열 형식 각 더에 3 개의 열 공간이 있음) 등
아래 샘플과 같이 offset-6과 함께 중심 클래스를 사용하십시오.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
나는 당신이 어떤 컨테이너에 대해 수평 및 수직으로 양식을 중앙에 배치하려고 생각합니다.
정품 인증을 사용할 수 없습니다. 인기있는 방법 (아래)을 사용하여 양식을 중앙에 배치하십시오.
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
사용 d-flex에서 container클래스 다음 추가 justify-content-center하고 align-items-center.
<div class="d-flex justify-content-center align-items-center container ">
<div class="row ">
<form action="">
<div class="form-group">
<label for="inputUserName" class="control-label">Enter UserName</label>
<input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
<small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Enter Password</label>
<input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">
</div>
</form>
</div>
</div>
중앙 태그를 사용하십시오.
<center>StackOverflow centered</center>
나는 이것을 시도해 본다.
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4 col-md-offset-5 align-center ">
<input type="text" name="username" placeholder="Username" >
</div>
</div>
</div>Bootstrap 사용을 고집한다면 d-inline-block아래와 같이 사용하십시오.
<div class="row d-inline-block">
<form class="form-inline">
<div class="form-group d-inline-block">
<input type="email" aria-expanded="false" class="form-control mr-2"
placeholder="Enter your email">
<button type="button" class="btn btn-danger">submit</button>
</div>
</form>
</div>
<div class="col-md-4 offset-md-4">
put your form here
</div>
참고 URL : https://stackoverflow.com/questions/20853066/how-to-center-form-in-bootstrap-3
'ProgramingTip' 카테고리의 다른 글
| Phonegap IOS에서 오버 스크롤 / 바운스 중지 (0) | 2020.12.09 |
|---|---|
| 기본 레이아웃 배경은 무엇입니까 (0) | 2020.12.09 |
| 입력 한 날짜가 오늘 날짜와 같은지 확인하는 방법은 무엇입니까? (0) | 2020.12.09 |
| Xcode가 프로젝트를받을 수 없습니다. (0) | 2020.12.09 |
| Ruby 1.9.3에서 debugger-linecache 설치 오류 (0) | 2020.12.09 |