如何使用 Bootstrap 居中表单数据

Question

我正在尝试将我的表单数据居中放置在下方。我在网上尝试了几种不同的方法，但找不到任何有效的方法。我正在使用 bootstrap，偏移量让我们弄乱了表单的标题，然后是实际的表单。谢谢！

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

Answer 1

查看下面我的示例 fiddle。您只需将所有内容包装在 div 中，然后对其应用以下 CSS 规则：margin: 0 auto;。这将自动使您的 div 居中。我也加了一个padding，这样更好看。

这里是fiddlelink：https://jsfiddle.net/Anokrize/DTcHh/23471/

Answer 2

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

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

margin: auto;

如果不行，可以尝试使用

text-align: center;

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

Answer 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 并给它一个 margin: 0 auto，对子表单做同样的事情，同时添加作为文本对齐中心到这个元素

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

Answer 5

使用bootstrapclass

text-center

整个表格

并去掉偏移量

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

或者这样偏移

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

如何使用 Bootstrap 居中表单数据

How to center form data using Bootstrap

html

css

forms

centering

twitter-bootstrap-3