Question

我缺少什么？
我可以看到容器的边框，它正确显示了我必须使用的区域。但是，当我添加行（div）和偏移量（div）时，它仍然是正确的。

<div id="page" class="container" style="border:solid">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <label for="firstName">First Name:</label>
                <input type="text" id="firstName" class="form-control" />
            </div>
            <div class="form-group">
                <label for="lastName">Last Name:</label>
                <input type="text" id="lastName" class="form-control" />
            </div>
        </div>
    </div>
</div>

Answer 1

我想我知道你的意思，但我不确定。你的意思是这样吗？

如果是这样，那个类就是：

class="text-center"

因此，您可以将代码更改为：

<div id="page" class="container" style="border:solid">
<div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
        <div class="form-group">
            <label for="firstName">First Name:</label>
            <input id="firstName" class="form-control text-center" type="text">
        </div>
        <div class="form-group">
            <label for="lastName">Last Name:</label>
            <input id="lastName" class="form-control text-center" type="text">
        </div>
    </div>
</div>

或者您可以将其添加到您想要的控件中，例如只输入表单控件。

希望有所帮助！

Answer 2

Bootstrap可以提供出色的移动体验，但台式机也可以从其脚手架功能中受益。因此，当我开发表单时，我喜欢使用尽可能少的空间。考虑到这一点，我已经改进了恶魔企鹅的代码和你的代码。像这样：

<div id="page" class="container" style="border:solid">
  <div class="row" style="padding-top: 12px;"></div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <div class="form-group">
        <input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
      </div>
      <div class="form-group">
        <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
      </div>
    </div>
  </div>
</div>

Answer 3

您还可以通过在字段中添加图标来修饰表单，如下所示：

<div id="page" class="container" style="border:solid">
  <div class="row" style="padding-top: 12px;"></div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon" id="firstName-addon"><i class="fa fa-user"></i></span>
          <input id="firstName" class="form-control text-center" placeholder="First Name" type="text">
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon" id="lastName-addon"><i class="fa fa-user"></i></span>
          <input id="lastName" class="form-control text-center" placeholder="Last Name" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

对于此实现，您必须将FontAwesome CSS参考链接添加到您可以从此处获取的页面：https://www.bootstrapcdn.com/fontawesome/

如何使用Bootstrap集中表单控件

3 个答案: