如何使用Bootstrap集中表单数据

Question

我试图将我的表单数据放在下面。我在网上尝试了一些不同的东西，却无法找到任何可行的东西。我正在使用bootstrap，而offset正在弄乱我们表格的标题，然后是实际的表格。谢谢！

<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

事情不是中心对齐的原因部分是由于引导列类（使项目向左浮动）。如果你消除这些并在CSS中定义宽度，你将能够更容易地定位它们。

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

margin: auto;

如果你不能，你可以尝试使用

text-align: center; 

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

Answer 2

您可以对表单的所有项目使用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 3

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

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

Answer 4

你有很多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，对子表单执行相同操作，同时还将text对齐中心添加到此元素

Answer 5

使用bootstrap类

text-center

整个表格

并摆脱抵消

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

或像这样抵消它

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