Önyükleme sütunları genişliği genişlik

Question

sayfanın tüm genişliği (yeşil olarak işaretli) olacak şekilde üst paneller (kırmızı olarak işaretlenmiş) nasıl genişletilir? Hepsi aynı genişliğe sahip olmalıdır.

Ve ikinci ve benzer bir sorun. Bootomda 7. tablo eklemem gerekiyor. Nasıl yapılır, yani hepsi aynı genişliğe sahipler mi?

Çevrimiçi demo: bootply

Kodum burada:

<div class="container-full"> 
    <div class="row clearfix"> 
     <div class="col-md-3 column well"> 
      <h2> 
       Heading 
      </h2> 
      <p> 
       Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
      </p> 
      <p> 
       <a class="btn" href="#">View details »</a> 
      </p> 
     </div> 
     <div class="col-md-9 column"> 
      <div class="row clearfix"> 
       <div class="col-md-12 column"> 
        <div class="row clearfix"> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
        </div> 
        <div class="row clearfix"> 
         <div class="col-md-1 column"> 
          <div class="panel panel-primary"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
          <div class="panel panel-default"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Panel title 
            </h3> 
           </div> 
           <div class="panel-body"> 
            Panel content 
           </div> 
           <div class="panel-footer"> 
            Panel footer 
           </div> 
          </div> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
         <div class="col-md-1 column"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row clearfix"> 
     <div class="col-md-12 column"> 
      <div class="row clearfix"> 
       <div class="col-md-2 column"> 
        <table class="table table-bordered table-condensed"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="col-md-2 column"> 
        <table class="table table-bordered table-condensed"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="col-md-2 column"> 
        <table class="table table-condensed table-bordered"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="col-md-2 column"> 
        <table class="table table-condensed table-bordered"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="col-md-2 column"> 
        <table class="table table-condensed table-bordered"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
       <div class="col-md-2 column"> 
        <table class="table table-condensed table-bordered"> 
         <thead> 
          <tr> 
           <th> 
            # 
           </th> 
           <th> 
            Product 
           </th> 
           <th> 
            Payment Taken 
           </th> 
           <th> 
            Status 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Default 
           </td> 
          </tr> 
          <tr class="active"> 
           <td> 
            1 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            01/04/2012 
           </td> 
           <td> 
            Approved 
           </td> 
          </tr> 
          <tr class="success"> 
           <td> 
            2 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            02/04/2012 
           </td> 
           <td> 
            Declined 
           </td> 
          </tr> 
          <tr class="warning"> 
           <td> 
            3 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            03/04/2012 
           </td> 
           <td> 
            Pending 
           </td> 
          </tr> 
          <tr class="danger"> 
           <td> 
            4 
           </td> 
           <td> 
            TB - Monthly 
           </td> 
           <td> 
            04/04/2012 
           </td> 
           <td> 
            Call in to confirm 
           </td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

varsa 9 col-md-1 onlar 12'ye bölünmelidir olamaz çünkü imkansız sütunlar (ızgara sistemi 12 bölümden oluşmaktadır. Bununla birlikte, 3 tane col-md-4 ek sarıcısına sahip olabilirsiniz ve her birine 3 tane col-md-4 sütunu yerleştirebilirsiniz ve bu size istediğiniz sonucu vermelidir. Buna benzer

şey:

<div class="container-full"> 
     <div class="row clearfix"> 
    <div class="col-md-3 column well"> 
     <h2> 
      Heading 
     </h2> 
     <p> 
      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
     </p> 
     <p> 
      <a class="btn" href="#">View details »</a> 
     </p> 
    </div> 
    <div class="col-md-9 column"> 

     <div class="col-md-4"> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
     </div> 

     <div class="col-md-4"> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
     </div> 

     <div class="col-md-4"> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
      <div class="col-md-4"> 
       ...content... 
      </div> 
     </div> 

    </div> 
</div> 

Düzenleme: Sabit yazım hata col-md-3 => col-md-4

Answer 2

yaşadım bunu sargıya NADİR vesilesiyle ... ama gerektiğinde, yardımcı olabilir ... ama yine de, 7 sütun ızgarası oluşturabilmeniz için özel bir ızgara tanımı oluşturabilirsiniz:

<div class='row grid7'> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
    <div class='col-md-1'>1/7th</div> 
</div> 

Sonra bazı CSS çalışması için: Bu AZ kullanarak https://github.com/drew-r/bootstrap-n-column Eğer n sütunlu önyükleme düzenleri oluşturabilir yardımcı olabilecek

.grid7 .col-md-1 { width: 14.285714285714%; } 
.grid7 .col-md-2 { width: 28.571428571429%; } 
.grid7 .col-md-3 { width: 42.857142857143%; } 
.grid7 .col-md-4 { width: 57.142857142857%; } 
.grid7 .col-md-5 { width: 71.428571428571%; } 
.grid7 .col-md-6 { width: 85.714285714286%; } 
.grid7 .col-md-7 { width: 100%; } 

Answer 3