收缩和定心引导3形式

Question

我与引导3个工作并试图拼凑碱布局的烧瓶中的应用。到目前为止，我有：

<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列居中（约红色正方形的大小），留下绿色按钮是。到目前为止，我已经尝试将col-xs-4添加到基于http://jsfiddle.net/tX3ae/225/的各个类中，但还没有弄清楚如何使它正常工作。我怎样才能做到这一点？

Answer 1

引导程序的行和列类不是被设计为可以被无限添加的。行元素应始终只有列元素作为其直接子元素。同样，列元素应始终是行元素的直接子元素。

<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