如何使用 Bootstrap 将表单数据居中答案

【问题标题】：How to center form data using Bootstrap如何使用 Bootstrap 将表单数据居中
【发布时间】：2016-12-14 18:22:03
【问题描述】：

我正在尝试将我的表单数据置于下方。我在网上尝试了一些不同的东西，但找不到任何有效的东西。我正在使用引导程序，偏移量让我们混淆了表单的标题，然后是实际的表单。谢谢！

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form class="form-horizontal" >
  
  <div class="form-group">
      <label class="col-sm-2 control-label">NetID</label>
      <div class="col-sm-3">
        <input class="form-control" name="name" id="name" type="text" placeholder="Enter their netid" onkeyup="showUser(this.value)">
      </div>
    </div>
    
     <center><div id="txtHint"><b>Enter the users netid, and their history is below:</b></div></center><br/>
     
     <div class="form-group">
        <label for="gender" class="col-sm-2 control-label">Cable Length</label>
        <div class="col-sm-3">
          <select id="gender" class="form-control">
            <option value="14ft">14ft</option>
            <option value="25ft">25ft</option>
          </select>
        </div>
      </div>
      
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Submit</button>
        </div>
      </div>
  </form>
</div>

【问题讨论】：

那么如何创建一个带边距的css类：auto;如果您愿意，您可以添加填充等，您甚至可以在其上编写媒体查询以实现响应，并在表单的容器上分配您创建的类。

标签： html css forms twitter-bootstrap-3 centering

【解决方案1】：

请看下面我的示例小提琴。您只需将所有内容包装在一个 div 中，然后对其应用以下 CSS 规则：margin: 0 auto;。这将自动使您的 div 居中。我还应用了填充，以便更好地查看。

这里是小提琴链接：https://jsfiddle.net/Anokrize/DTcHh/23471/

【讨论】：

我试过了，但不管什么原因它在网站上都不起作用。它只是将所有内容都稍微降低了一点。
那你必须提供更多的代码，否则我帮不了你
老实说，没有更多。让我把它扔进一个粘贴箱pastebin.com/Th2AeF8G
你可以尝试应用边距吗：0 auto;到它自己的项目而不是 div？
这主意不错，我试试看！

【解决方案2】：

事情没有居中对齐的部分原因是引导列类（它使项目向左浮动）。如果您消除这些并改为在 CSS 中定义宽度，您将能够更轻松地定位它们。

如果你可以定义元素的宽度使其居中，你可以使用

margin: auto;

如果不行，可以试试

text-align: center;

这是一个代码笔。我希望这有帮助。 http://codepen.io/anon/pen/AXmxgm

【讨论】：

【解决方案3】：

你有很多 div 元素，在我看来是不必要的。 Bootstrap 也不需要使用。

为了简单起见，我删除了 div：

[http://codepen.io/MBarnes/pen/VjVyGL][1]

HTML:
<div class=".center">
  <form>
    <label class="control-label">NetID</label>
    <input class="form-control" name="name" id="name" type="text" placeholder="Enter their netid" onkeyup="showUser(this.value)">
    <center><div id="txtHint"><b>Enter the users netid, and their history is below:</b></div></center><br/>
    <label for="gender" class="control-label">Cable Length</label>
    <select id="gender" class="form-control">
      <option value="14ft">14ft</option>
      <option value="25ft">25ft</option>
    </select></br>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>



CSS:
.center {
  margin: 0 auto;
  width: 100%;
}
form {
  margin: 0 auto;
  width: 500px;
  text-align: center;
}

只需将表单包装在容器 div 中并给它一个边距：0 auto，对子表单执行相同操作，同时将文本对齐中心添加到此元素

【讨论】：

【解决方案4】：

您可以对表单的所有项目使用offsetting columns。

请检查结果。是你想要达到的吗？

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <form class="form-horizontal">

    <div class="form-group">
      <label class="col-sm-offset-3 col-sm-2 control-label">NetID</label>
      <div class="col-sm-3">
        <input class="form-control" name="name" id="name" type="text" placeholder="Enter their NetID" onkeyup="showUser(this.value)">
      </div>
    </div>

    <div class="form-group">
      <div id="txtHint" class="col-sm-offset-5 col-sm-3">
        <b>Enter the users NetID, and&nbsp;their&nbsp;history&nbsp;is&nbsp;below:</b>
      </div>
    </div>

    <div class="form-group">
      <label for="gender" class="col-sm-offset-3 col-sm-2 control-label">Cable Length</label>
      <div class="col-sm-3">
        <select id="gender" class="form-control">
          <option value="14ft">14ft</option>
          <option value="25ft">25ft</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-offset-5 col-sm-3">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>

  </form>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

我想保持输入框很小，然后它们在页面中居中。好吧，你的是迄今为止最接近的，我会继续戳，看看，它弄乱了部分文本。
@Colin 请在Full page 模式下检查我的sn-p。
我很抱歉我一开始没有这样看。但是我实现了代码，并对 div id=textHint （它是从另一个 php 文件的返回）进行了一些调整，效果很好！谢谢大家的帮助！
@Colin 很高兴能提供帮助。

【解决方案5】：

使用引导类

text-center

整个表格

并摆脱偏移

http://codepen.io/Skaidrius/pen/NROQwo

或像这样抵消它

http://codepen.io/Skaidrius/pen/XjyAWr

【讨论】：