收縮和定心引導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