입력 양식을 격자 표 중앙에 배치 [BOOTSTRAP 3]

그래서 응답 형 사이트에서 작업하고 있습니다. 그리고 div 안에 입력 상자를 중앙에 배치 할 수 없습니다. 입력 양식이 아래로 이동하면서 보이지 않습니다.입력 양식을 격자 표 중앙에 배치 [BOOTSTRAP 3]

입력란을 코드의 파란색 부분에 가운데 놓고 실제로 보이게 할 수있는 방법이 필요합니다. 여기

현재 프로젝트 click here

여기 내 HTML 파일의 TO 링크의 :

.my_logo { 
 
    margin: 0; 
 
    float: none; 
 
    text-align: center; 
 
} 
 

 
html,body { 
 
    padding:0; 
 
    margin:0; 
 
    height:100%; 
 
    min-height:100%; 
 
} 
 

 
.quarter{ 
 
    width:100%; 
 
    height:50%; 
 
} 
 

 
.contents{ 
 
    height:50%; 
 
    width:100%; 
 
} 
 

 
body { 
 
    padding-top: 60px; 
 
} 
 

 
button, #input{ 
 
    margin-top: 30px; 
 
} 
 

 
.quarter:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<!DOCTYPE HTML> 
 

 

 
<html> 
 
    <head> 
 
     <title>BusBuzz BETA</title> 
 
     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
 
     <link href="custom/custom.css" rel="stylesheet"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    </head> 
 
    <body> 
 
     <nav class = "navbar navbar-default navbar-fixed-top"> 
 
      <div class="container"> 
 
       <center> 
 
        <img src="img/temp_logo.png" style="height: 60px;"> 
 
       </center> 
 
      </div> 
 
     </nav> 
 
     <div class="contents"> 
 
     <div class="col-md-6 quarter text-center" style="background-color:blue;"> 
 
      <a class="btn btn-danger btn-responsive" style="top: 50%;" href="#">Set Up Geolocation!</a> 
 
     </div> 
 
     <div class="col-md-6 quarter text-center" style="background-color:red;"> 
 
    <!--PROBLEM-->   <input type="text" class="form-control"></input> 
 
     </div> 
 
     <div class="col-md-6 quarter" style="background-color:yellow;"></div> 
 
     <div class="col-md-6 quarter text-center" style="background-color:green;"> 
 
      <a class="btn btn-danger btn-responsive" style="top: 50%;" href="#">Set Alarm!</a>  
 
     </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 
    </body> 
 
</html>

난 당신이 빨간색으로 입력 상자를 중심 것을 의미한다고 가정하겠습니다

출처

2016-06-16 BorisMediaProds

그게 바로 당신의 코드가 보여주는 것입니다. 이것을 바탕으로 "텍스트 센터"수업이 뭔가를하고 있는지 확신합니까? 나는 그것이 부트 스트랩에서 어떤 것을하지만, 부트 스트랩이가는 한 당신의 코드가 정확하다는 것을 알고있다. 이 라이브 어딘가에 링크가 있습니까?

출처

2016-06-16 22:50:41 Derek

@BorisMediaProds - 무엇에 대해 .quarter 클래스를 사용하고 있습니까? 부트 스트랩 규칙과 충돌하는 자체 맞춤 규칙을 만드는 것처럼 보입니다. – Derek

저는 4 개의 섹션 안에 4 개의 다른 버튼/폼을 넣으려고하므로 기본적으로 4 개의 섹션으로 화면을 분할하기 위해 1/4 클래스를 사용했습니다. 그래서 섹션이 고르게 나뉘어져 있는지 확인하는 데 도움이되는 4 가지 색상이 있습니다. – BorisMediaProds

@BorisMediaProds - 그렇다면 분기 클래스를 사용하거나 Bootstrap col-md-6 클래스를 사용해야합니다. 둘 다 사용할 수 없습니다. 당신의 4 분의 1 클래스 높이는 양식이 div 외부로 떨어지는 원인입니다 (따라서 보이지 않게합니다). 확인하려면 .quarter에서 "height"특성을 제거하면 의미를 알 수 있습니다. – Derek

입력 양식을 격자 표 중앙에 배치 [BOOTSTRAP 3]

답변

관련 문제