센터링 부트 스트랩 입력 필드

센터링 부트 스트랩 입력 필드

---

나는 이것으로 처음이다. 특히 부트 스트랩과 함께. 이 코드가 있습니다.

<div class="row">
    <div class="col-lg-3">
       <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
       </div><!-- /input-group -->
    </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

이 입력 필드와 버튼을 페이지 중앙에 넣어야합니다 ... "margin-left : auto; margin-right : auto;" 작동하지 않았다 ... 누군가 아이디어가 있습니까?

---

당신은 그냥 내가 사용하는 것이 좋습니다 것입니다 귀하의 경우, 행의 나머지 크기의 절반과 동일한 오프셋 사용, 열을 중심으로 보이도록 오프셋을 사용할 수 col-lg-4와 col-lg-offset-4의를 것을 (12-4)/2.

<div class="row">
    <div class="col-lg-4 col-lg-offset-4">
        <div class="input-group">
            <input type="text" class="form-control" /> 
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
            </span>
        </div><!-- /input-group -->
    </div><!-- /.col-lg-4 -->
</div><!-- /.row -->

데모 바이올린

참고이 기술은 짝수 열 크기에 작동 ( .col-X-2, .col-X-4, col-X-6당신이 사용할 수있는 크기를 지원하려는 경우 등), margin: 0 auto;하지만 당신은 너무 요소에서 플로트를 제거해야합니다, 나는 같은 사용자 정의 CSS 클래스를 추천합니다 수행원:

.col-centered{
    margin: 0 auto;
    float: none;
}

데모 바이올린

---

이 스타일을 다음에 적용 해보십시오 div class="input-group".

text-align:center;

보기 : Fiddle .

---

요소를 중앙에 배치하는 가장 좋은 방법은 .center-block도우미 클래스를 사용하는 것입니다 . 그러나 부트 스트랩 버전은 3.1.1 이상이어야합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-lg-3 center-block">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
         </span>
    </div>
    <!-- /input-group -->
  </div>
  <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

---

좋습니다. 이것이 저에게 가장 적합한 솔루션입니다. Bootstrap에는 장치 또는 뷰포트 크기가 증가함에 따라 최대 12 개 열까지 적절하게 확장되는 모바일 우선 유동 격자 시스템이 포함되어 있습니다. 따라서 이것은 모든 브라우저와 장치에서 완벽하게 작동했습니다.

        <div class="row">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="input-group">
                    <input type="text" class="form-control" /> 
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div><!-- /input-group -->
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4"></div>
        </div><!-- /.row -->

이것은 4 + 4 + 4 = 12 ...를 의미하므로 두 번째 div는 중간에 있습니다.

예 : http://jsfiddle.net/jpGwm/embedded/result/

---

나 에게이 솔루션은 TD의 입력 필드를 중앙에 배치하는 데 잘 작동했습니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet" />
<td style="background:#B3AEB5;">
  <div class="form-group text-center">
    <div class="input-group" style="margin:auto;">
      <input type="month" name="p2" value="test">
    </div>
  </div>
</td>

---

이 코드를 사용해보십시오 :

.col-lg-3 {
  width: 100%;
}
.input-group {
   width: 200px; // for exemple
   margin: 0 auto;
}

작동하지 않으면 사용! 중요

참조 URL : https://stackoverflow.com/questions/18036315/centering-bootstrap-input-fields