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

【问题标题】：Centering Input Form inside a Grid Table [BOOTSTRAP 3]在网格表中居中输入表单 [BOOTSTRAP 3]
【发布时间】：2016-10-18 14:35:42
【问题描述】：

所以，我正在开发一个响应式网站。而且，我无法在 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>

【问题讨论】：

标签： html forms grid centering

【解决方案1】：

我假设您的意思是将输入框以红色居中，因为这就是您的代码所显示的内容。基于此，您确定“文本中心”类有什么作用吗？我知道它在 Bootstrap 中做了一些事情，但就 Bootstrap 而言，您的代码是正确的。你有这个现场直播的链接吗？

【讨论】：

@BorisMediaProds - 你用 .quarter 类做什么？看起来您正在创建与 Bootstraps 规则冲突的自定义规则。
我已经使用 Quarter 类将屏幕分成 4 个部分，因为我试图在 4 个部分中放置 4 个不同的按钮/表单。这就是为什么我有 4 种难看的颜色来帮助我识别这些部分是均匀分割的。
@BorisMediaProds - 好的，那么您要么需要使用 Quarter 类，要么使用 Bootstrap col-md-6 类。你不能同时使用两者。您的四分之一班级高度是导致表单落在 div 之外的原因（从而使其不可见）。只是为了验证，删除 .quarter 上的“高度”属性，你就会明白我的意思了。
谢谢德里克，爱你。但是如何使用引导类将屏幕分成 4 个部分。
不是你想要的方式。这是一个使用您现有代码的小提琴，只是删除了 Bootstrap 类以及您的 .quarter:before 规则。 jsfiddle.net/vL79tk9y 编辑：我应该澄清一下，并不是你不能在 Bootstrap 中这样做，只是它没有必要并且需要 Javascript。