html - 收缩和居中 bootstrap 3 形式

Question

我正在使用 bootstrap 3 并尝试拼凑一个 Flask 应用程序的基本布局。到目前为止我有:

   <div class="container">
      <div class="row">
            <div class="content">
              <div class="pull-middle">
                <h1 class="page-header">Create an awesome App template with Bootstrap.</h1>
                    <div class="container">
                    {% block content %}
                        {% endblock %}
                            </div>

                  <div class="panel panel-default ">
                    <div class="panel-body ">
                        <form action="#" role="form col-xs-4">
                            <div class="input-group ">
                                <input type="email" class="form-control" placeholder="Email Address" required>
                                <span class="input-group-btn">
                                  <button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
              </div>
            </div>

      <footer class="footer text-center">
    <div class="container">
        <small>© Copyright 2015. </small>
    </div>
</footer>

我想将电子邮件地址表单缩小到 4-6 列并将其居中(大约为红色方 block 的大小)，而将绿色按钮保持原样。到目前为止，我已经尝试将 col-xs-4 添加到基于 http://jsfiddle.net/tX3ae/225/ 的各种类中，但还没有弄清楚如何让它工作。我该怎么做？

Answer 1

Bootstrap 的行和列类并非设计为随意添加。行元素应该总是只有列元素作为它们的直接子元素。同样，列元素应始终是行元素的直接子元素。

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="content">
        <div class="pull-middle">
          <h1 class="page-header">Create an awesome App template with Bootstrap.</h1>
          <div class="container">
            {% block content %}
            {% endblock %}
          </div>
          <div class="row">
            <div class="col-xs-12 col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
              <div class="panel panel-default ">
                <div class="panel-body ">
                  <form action="#" role="form">
                    <div class="input-group ">
                      <input type="email" class="form-control" placeholder="Email Address" required>
                      <span class="input-group-btn">
                        <button class="btn btn-success btn-circle" type="submit">Sign up for free</button>
                      </span>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer text-center">
        <div class="container">
          <small>© Copyright 2015. </small>
        </div>
      </footer>
    ...

查看文档了解更多详情: http://getbootstrap.com/css/#grid