Question

所以，我正在开发一个响应式网站。而且，我无法将输入框置于div中心。输入表单不断向下移动，并且不可见。

我需要一种方法，我可以将输入框置于代码的蓝色部分内，并实际使其可见。

这里是当前项目的链接click here

这是我的HTML文件：

.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>

Answer 1

我将假设您的意思是将输入框置于红色中心，因为这是您的代码所显示的内容。基于此，你确定这个班级＆＃34;文本中心＆＃34;做点什么？我知道它在Bootstrap中做了一些事情，但就Bootstrap来说，你的代码是正确的。你在某个地方有这个直播的链接吗？

在网格表中居中输入表格[BOOTSTRAP 3]

1 个答案: