Jak zmienić szerokość kolumn ładowania początkowego

Question

jak rozwinąć górne panele (oznaczone jako czerwone), tak aby przewyższyć całą szerokość strony (oznaczoną kolorem zielonym)? Wszystkie muszą mieć tę samą szerokość.

Drugi i podobny problem. Potrzebuję dodać 7. stół w bootomierzu. Jak to zrobić, więc wszystkie mają tę samą szerokość?

demo online: bootply

Mój kod jest tutaj:

<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

Jeśli masz 9 kol-MD-1 kolumny Jest to niemożliwe, ponieważ nie potrafią być podzielona przez 12 (system siatki składa się z 12 części).

Jednak możesz mieć 3 dodatkowe owijki col-md-4 i umieścić w nich 3 kolumny col-md-4, które powinny dać ci wynik, o który prosisz.

Coś podobnego do tego:

<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> 

Edit: Naprawiono błąd w pisowni do wrapper kol-MD-3 => kol-MD-4

Answer 2

miałem to zrobić w przypadku RARE ... ale w razie potrzeby może pomóc ... ale w każdym razie możesz utworzyć niestandardową definicję siatki, aby mieć siatkę 7 kolumn:

<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> 

Następnie, niektóre CSS, aby to działało:

.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

To może pomóc https://github.com/drew-r/bootstrap-n-column można stworzyć n-kolumn bootstrap układy zużywając mniej