HTML 콘텐츠가 좁은 화면 중심에 있지 않음

Question

주로 모바일 웹 사이트를 대상으로하는 부트 스트랩 3을 사용하고 있습니다. 내가 전체 라인을 차지하지 않기를 원할 때 콘텐츠 중심에 문제가 있습니다. 화면이 특정 너비보다 큰 경우, 너비가 (특히 우리가 최적화하는 크기 인 경우) & 인 경우 중앙에 오지 않습니다. 특히 화면의 왼쪽 테두리에서 벗어나지 않습니다. 페이지. 또한 일부 요소는 특정 크기가되면 크기가 계속 증가합니다. 나는 마지막 하나가 정상적인 행동이라고 생각하지만, 내 인생에서 그 이유를 알 수는 없습니다.

는 HTML : 부트 스트랩 - custom.css에서

<div class="col-xs-12"> 
    <div class="container"> 
     <div class="form-group col-xs-11"> 
      <div class="col-xs-5 pull-left"> 
       <input type="text" class='form-control' id="firstName" name="firstName" placeholder="First Name" required /> 
      </div> 
      <div class="col-xs-5 pull-right"> 
       <input type="text" class='form-control' id="lastName" name="lastName" placeholder="Last Name" required /> 
      </div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <input type="email" class='form-control' id="email" name="email" placeholder="Email" required /> 
    </div> 
</div> 

에서 @ 미디어의는 다음과 같습니다

@media (min-width 1200) 
    .container { 
     max-width: 1140px; 
    } 
@media (min-width 992) 
    .container { 
     max-width: 940px; 
    } 
@media (min-width 768) 
    .container { 
     max-width: 720px; 
    } 
.container { 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: 0; 
    padding-right: 0; 
} 

내가 그이를 인용 할 수있는 권리/접수 방법 인 경우에 확실하지 않다.

답안에 필요한 경우 나머지 bootstrap-custom.css도 있습니다.

P. 필자가 원했던 첫 번째 행 (첫 번째 이름은 & 성)이없는 전체적인 이유가 전체 행을 차지하기 때문입니다. 그 행이 양쪽에있는 공간의 중간에 있도록하고 싶었습니다.

P.P.S. 다음은 fiddle입니다.

Answer 1

면책 조항 : 이전에는 부트 스트랩을 수행하지 않았습니다. 어둠 속에서 찔러 버렸습니다.

간단한 2 열 레이아웃

하는 .row을 만들고 .span* 열의 해당 번호를 추가한다. 12 열 그리드이므로 각 .span*은 12 개의 열에 걸쳐 있으며 각 행 (또는 상위 열의 수)에 항상 최대 12 개를 추가해야합니다.

그래서, 나는 그들이 최대 12 개의 추가, 따라서 함께 행의 폭의 100 %를 차지할 그래서 col-xs-6에 col-xs-5 요소를 변경했습니다. 귀하의 이메일 입력란을 .container으로 옮기고 다른 form-group의 왼쪽 및 오른쪽 여백을 반영하기 위해 col-xs-11 클래스를 추가했습니다. div (다른 필드에서했던 것처럼)에 이메일 입력란을 싸서 col-xs-12 클래스를 추가하여 부모 행의 너비를 100 % 늘릴 수 있습니다.

Here은 바이올린입니다.

또한 일부 요소는 특정 크기가 될 때 크기가 계속해서 점프합니다. 나는 마지막 하나가 정상적인 행동이라고 생각하지만, 삶은 나를 이해할 수 없다.

Here은 다른 max-width의 사이를 쉽게하기 위해 CSS3 transitions을 사용 업데이트 바이올린입니다.

Answer 2

시도해 보셨습니까? text-align : center; 컨테이너 클래스에?

Answer 3

마크 업을 약간 변경해야한다고 생각합니다.container 안에 모든 것을 감싸고 행으로 당신의 form-group을 .. 예를 들어

:

<div class="container"> 
    <div class="col-xs-12"> 
     <div class="row form-group"> 
     <div class="col-xs-6"> 
      <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required=""> 
     </div> 
     <div class="col-xs-6 pull-right"> 
      <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required=""> 
     </div> 
     </div> 
     <div class="row form-group"> 
      <div class="col-xs-12"> 
      <input type="email" class="form-control" id="email" name="email" placeholder="Email" required=""> 
      </div> 
     </div> 
    </div> 
</div> 

근무 데모 : http://bootply.com/86294

P.S. - 입력이 너무 작아지지 않도록 demo의 옵션 # 2를 살펴보십시오. 이렇게하면 가장 작은 화면에 세로로 쌓을 수 있습니다.