入力フォームをグリッドテーブルの中にセンタリングする[BOOTSTRAP 3]

私は応答可能なサイトに取り組んでいます。そして、div内に入力ボックスを中央に配置することはできません。入力フォームはシフトダウンし続け、目に見えません。入力フォームをグリッドテーブルの中にセンタリングする[BOOTSTRAP 3]

コードの青い部分の内側に入力ボックスを配置して実際に見えるようにする方法が必要です。私はあなたが赤で入力ボックスを中心に意味することを前提とするつもりだ

.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

：

はこちら現在のプロジェクトclick here

へのリンクはここに私のHTMLファイルです'Sそれがあなたのコードが示しているものですから。これに基づいて、クラス「テキストセンター」が何かをしていることは確かですか？私はそれがブートストラップで何かをしていることを知っていますが、あなたのコードはブートストラップが行く限り正しいです。あなたはこのライブへのリンクをどこかに持っていますか？

出典

2016-06-16 22:50:41 Derek

@BorisMediaProds - あなたは何か.quarterクラスを使用していますか？あなたがBootstrapsルールと競合する独自のカスタムルールを作成しているようです。 – Derek

私は四つのセクションに4つの異なるボタン/フォームを収めようとしているので、4つのセクションでスクリーンを本質的に分割するために四半期クラスを使用しました。だからこそ、セクションが均等に分割されていることを識別するための4つの醜い色があります。 – BorisMediaProds

@BorisMediaProds - それでは、クォータークラスを使用するか、ブートストラップcol-md-6クラスを使用する必要があります。両方を使うことはできません。あなたの四分の一クラスの高さは、フォームがdivの外側に落ちてしまう（それによって見えなくなります）。確認するには、.quarterの "height"属性を削除すれば、私の意図がわかります。 – Derek

入力フォームをグリッドテーブルの中にセンタリングする[BOOTSTRAP 3]

答えて

関連する問題