부트 스트랩을 사용하여 양식 요소를 정렬하는 그리드 시스템 3

Question

<?php echo form_open('secure/register', 'class="form"', 'role="form"'); ?> 
<div class="page-header"> 
    <h2><?php echo lang('reg_title'); ?></h2> 
</div> 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword1">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
</div> 
<div class="form-group"> 
    <div class="text-center"> 
     <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button> 
    </div> 
</div> 
<?php echo form_close(); ?> 

이것은 등록을 위해 생성 한 양식입니다.

는 이제 그런 레이아웃 :

는

Email 
_________________________ 
Password 
_________________________ 
      [Reg] 

는 콘테이너 내의 폭의 100 %가 걸린다.

그래서 문제는, 말하자면, 컨테이너의 60 % 폭 소요 나는 형태가 작고 중앙에 정렬 할 수있는 방법

1

)인가? 그런 다음 왼쪽에는 20 %의 빈 공간이 있고 오른쪽에는 20 %의 빈 공간이 있습니다.

2) 또한이 레이아웃에서 어떻게 양식을 만들 수 있습니까?

Answer 1

이 양식은 모든 측면에서 66.6 %의 폭과 16.7 %의 이익률 중앙에 정렬 할

<div class="col-md-8 col-md-offset-2"> 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
</div> 
<div class="form-group"> 
    <label for="exampleInputPassword1">Password</label> 
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
</div> 
<div class="form-group"> 
    <div class="text-center"> 
     <button type="submit" name="submit" class="btn btn-primary"><?php echo lang('register_btn'); ?></button> 
    </div> 
</div> 
</div> 

같은 사업부로 사업부를 포장 돕는

Email 
_________________________ 
Password 
_________________________ 
Contact 
FirstName___ LastName____ 
      [Reg] 

감사합니다. 작은 크기의 농장에서도 이것을 원하면 col-sm-8 col-sm-offset-2 클래스를 추가하십시오.

두 번째 질문에 대해서는 인라인 양식이나 가로형 양식을 사용할 수 있습니다. 마레 정보 Read here 당신이 양식을 사용하고 구성하는 가로 점 클래스를 함께으로 부트 스트랩 문서에서

<form class="form-horizontal" role="form"> 
    <div class="form-group"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
    </div> 
    </div> 
</form> 

Answer 2

를 사용하여 2 자리를 공백과 행의 모든 ​​컨테이너에 부트 스트랩의 가중치를 할당 할 수 있습니다. 총 가중치는 12까지 합계되어야하므로 2-8-2와 같은 것을 사용하십시오. 사용자 @VikasRana 수행해야했습니다 무엇의 대부분 커버하고있다

http://getbootstrap.com/examples/grid/

Answer 3

그러나 나는 약간의 정교한 것이다.

모르는 경우 부트 스트랩은 요소를 체계적으로 배치하기위한 그리드 시스템으로 구성됩니다. 각 행은 12 개의 열로 나뉩니다. 그리드 레이아웃 here을 볼 수 있습니다.

1) 대답은 위 말한다처럼, 클래스 <div class="col-md-8 col-md-offset-2"></div>에 싸서도 내부 <div class="container"></div> 것을 포장 : 당신의 문제에 대한

. container에는 각보기 포트에 접두사가 붙은 너비가 있으므로 양식이 더 짧고 중앙에 표시되어야합니다. demo here을 볼 수 있습니다. 모바일 장치에서는 양식 너비를 100 %로 설정하여 작은 뷰포트를 디자인 할 때 사용되는 col-sm-* 클래스를 생략 할 수 있습니다.

2) 두 번째 경우 <label>과 <input>을 같은 줄에 표시하려면 form-inline 클래스를 사용할 수 있습니다. 너비를 동일하게 만들고 간격을 두려면 col-md-6 클래스로 각 줄을 감쌀 수 있습니다. Demo here.