7 columnas iguales en bootstrap

Un casi igual, rápido solución. Sin css personalizado.

<div class="col-md-4">
    <div class="row">
        <div class="col-md-4"></div> <!-- this column empty -->
        <div class="col-md-4"> 1 </div>
        <div class="col-md-4"> 2 </div>
    </div>
</div>

<div class="col-md-8">
    <div class="row">
        <div class="col-md-2"> 3 </div>
        <div class="col-md-2"> 4 </div>
        <div class="col-md-2"> 5 </div>
        <div class="col-md-2"> 6 </div>
        <div class="col-md-2"> 7 </div>
        <div class="col-md-2"></div> <!-- this column empty -->
    </div>
</div>

Quería una solución más precisa para esto, así que hice un conjunto especial de clases row/col (semánticamente ligado al concepto de un calendario).

Esto arranca la forma en que Bootstrap construye la cuadrícula base (en grid-framework.less). Conserva la xs, sm, md, y lg clases para personalizar la cuadrícula en vistas diferentes.

Nota: esto solo incluye el estilo de cuadrícula; aún tendrás que escribir el resto para que en realidad se vea como un calendario.

El Marcado

<div class="row">
    <div class="col-xs-7">
        <div class="calendar">
            <div class="calendar-row">
                <div class="calendar-xs-1">Sunday</div>
                <div class="calendar-xs-1">Monday</div>
                <div class="calendar-xs-1">Tuesday</div>
                <div class="calendar-xs-1">Wednesday</div>
                <div class="calendar-xs-1">Thursday</div>
                <div class="calendar-xs-1">Friday</div>
                <div class="calendar-xs-1">Saturday</div>
            </div>
        </div>
    </div>
    <div class="col-xs-5">
        This container intentionally left blank.
    </div>
</div>

El .less

/*
 * Calendar grid
 */

@calendar-columns:      7;
@calendar-gutter-width: 0px;

.make-calendar-columns() {
  // Common styles for all sizes of calendar columns, widths 1-12
  .cal(@index) when (@index = 1) { // initial
    @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general; "=<" isn't a typo
    @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@calendar-gutter-width / 2);
      padding-right: (@calendar-gutter-width / 2);
    }
  }
  .cal(1); // kickstart it
}
.float-calendar-columns(@class) {
  .cal(@index) when (@index = 1) { // initial
    @item: ~".calendar-@{class}-@{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general
    @item: ~".calendar-@{class}-@{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .cal(1); // kickstart it
}

.calc-calendar-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .calendar-@{class}-@{index} {
    width: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .calendar-@{class}-push-@{index} {
    left: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .calendar-@{class}-push-0 {
    left: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .calendar-@{class}-pull-@{index} {
    right: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .calendar-@{class}-pull-0 {
    right: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = offset) {
  .calendar-@{class}-offset-@{index} {
    margin-left: percentage((@index / @calendar-columns));
  }
}

// Basic looping in LESS
.loop-calendar-columns(@index, @class, @type) when (@index >= 0) {
  .calc-calendar-column(@index, @class, @type);
  // next iteration
  .loop-calendar-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-calendar(@class) {
  .float-calendar-columns(@class);
  .loop-calendar-columns(@grid-columns, @class, width);
  .loop-calendar-columns(@grid-columns, @class, pull);
  .loop-calendar-columns(@grid-columns, @class, push);
  .loop-calendar-columns(@grid-columns, @class, offset);
}


// Row
//
// Rows contain and clear the floats of your columns.

.calendar-row {
    .make-row(@calendar-gutter-width);
}


// Columns
//
// Common styles for small and large grid columns

.make-calendar-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-calendar(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-calendar(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-calendar(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-calendar(lg);
}

Su problema aquí es que tiene un número impar de columnas y, por lo tanto, no puede lograr la simetría. Debido a que cada columna es un día de la semana, se podría decir que todos los días de la semana tienen la clase col-md-2 y los otros dos tienen la clase col-md-1.

Este enfoque funcionará basado en la suposición de que el sábado y el domingo necesitan menos espacio, pero no se si esto encaja en su escenario.

<div class="row">
    <div class="col-md-2">Mon</div>
    <div class="col-md-2">Tue</div>
    <div class="col-md-2">Wen</div>
    <div class="col-md-2">Thu</div>
    <div class="col-md-2">Fri</div>
    <div class="col-md-1">Sat</div>
    <div class="col-md-1">Sun</div>
</div>
<div class="row">
    <div class="col-md-2">1</div>
    <div class="col-md-2">2</div>
    <div class="col-md-2">3</div>
    <div class="col-md-2">4</div>
    <div class="col-md-2">5</div>
    <div class="col-md-1">6</div>
    <div class="col-md-1">7</div>
</div>

Una demo es aquí

Actualizar a Bootstrap 4 es probablemente una buena opción.

Viene con una clase col para columnas de igual ancho

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

@ Brad tu respuesta fue brillante y elegante, la modifiqué ligeramente para aquellos que usan sass. Tenga en cuenta que los comentarios en el código no son míos, son simplemente los de la base de código de arranque de github. Los dejé intactos como referencia.

HTML

<div class="row">
    <div class="col-xs-12">
        <div class="calendar">
            <div class="calendar-row header">
                <div class="calendar-xs-1">Sunday</div>
                <div class="calendar-xs-1">Monday</div>
                <div class="calendar-xs-1">Tuesday</div>
                <div class="calendar-xs-1">Wednesday</div>
                <div class="calendar-xs-1">Thursday</div>
                <div class="calendar-xs-1">Friday</div>
                <div class="calendar-xs-1">Saturday</div>
             </div>
        </div>
    </div>
 </div>

SASS

// Calendar grid generation
//

$calendar-columns: 7;
$calendar-gutter-width: $grid-gutter-width;

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-calendar-columns() {
  $list: '';
  $i: 1;
  $list: ".calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
  @for $i from (1 + 1) through $calendar-columns {
    $list: "#{$list}, .calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($calendar-gutter-width / 2);
    padding-right: ($calendar-gutter-width / 2);
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-calendar-columns($class) {
  $list: '';
  $i: 1;
  $list: ".calendar-#{$class}-#{$i}";
  @for $i from (1 + 1) through $calendar-columns {
    $list: "#{$list}, .calendar-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-calendar-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .calendar-#{$class}-#{$index} {
      width: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .calendar-#{$class}-push-#{$index} {
      left: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == push) and ($index == 0) {
    .calendar-#{$class}-push-0 {
      left: auto;
    }
  }
  @if ($type == pull) and ($index > 0) {
    .calendar-#{$class}-pull-#{$index} {
      right: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == pull) and ($index == 0) {
    .calendar-#{$class}-pull-0 {
      right: auto;
    }
  }
  @if ($type == offset) {
    .calendar-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $calendar-columns));
    }
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-calendar-columns($calendar-columns, $class, $type) {
  @for $i from 0 through $calendar-columns {
    @include calc-calendar-column($i, $class, $type);
  }
}


// Create grid for specific class
@mixin make-calendar($class) {
  @include float-calendar-columns($class);
  @include loop-calendar-columns($calendar-columns, $class, width);
  @include loop-calendar-columns($calendar-columns, $class, pull);
  @include loop-calendar-columns($calendar-columns, $class, push);
  @include loop-calendar-columns($calendar-columns, $class, offset);
}

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  @include make-row($calendar-gutter-width);
}


// Columns
//
// Common styles for small and large grid columns

@include make-calendar-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-calendar(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-calendar(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-calendar(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-calendar(lg);
}

Debe dividir un diseño de bootstrap de 12 columnas en 7 partes iguales. Si cambia el diseño css, se enfrentará a los mismos problemas, por ejemplo, al dividir una pantalla en 13 partes iguales con un diseño de 14 columnas.

Además, cambiar el diseño de la columna también te hará rediseñar mucho. Por lo tanto, yo sugeriría que utilice tabla en su lugar. Así

<div class='container-fuid'>
 <table class='table'> <!-- add style="table-layout:fixed;" so that table do not vary in width due to text size variations -->
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
 </table>
</div>

Tiene el mismo efecto que el cols, pero es más rápido para caso por caso donde se necesita número de arbitraje de igual bloques para ser impresos en la pantalla programáticamente por PHP o de otra manera.

Al igual que en una pantalla de flujo de proceso, el siguiente script puede dar una idea de cómo se puede dividir una pantalla estándar de 12 columnas en tantas columnas/unidades de visualización como desee:

$cols = 15;     /* arbitary number of columns */

/* generate data array */

$data_array = array();

for($i=0 ; $i<$cols ; $i++){
        $data_array[] = 'Value : '.$i ;
}

/* use the array to get the screen in that many columns */

echo "<div class='container'>";
echo "<table class='table'>";
echo "<tr>";
foreach($data_array as $key => $value){
        echo "<td>".$value."</td>";
}
echo "</tr>";
echo "</table>";
echo "</div>";

Siguiendo la respuesta de Antony Gibbs, simplemente puede usar Boostrap 4 "col " clase css:

<div class="row">
  <div class="col">Mon</div>
  <div class="col">Tue</div>
  <div class="col">Wen</div>
  <div class="col">Thu</div>
  <div class="col">Fri</div>
  <div class="col">Sat</div>
  <div class="col">Sun</div>
</div>

No necesita necesariamente Bootstrap 4, siempre puede copiar las declaraciones css de BS4 en su propia hoja de estilo.

/* Equal width */
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

/* Add gutters */
.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

Esto tiene la ventaja de estar listo para BS4 una vez que migras y también da la posibilidad de usar 5, 7, 9 o 11 columnas.

Https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

Lo resolví de una manera sencilla. acabo de usar el grupo de botones justificados de bootstrap, solo 7 botones justificados, pero en lugar del botón real utilicé span en el div de contenedores de botones y neutralizé las clases innecesarias. se ve así (era para un calendario semanal también)

<div class="col-xs-12">
  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">אי</span>
        <span class="day">26/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">בי</span>
        <span class="day">27/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">גי</span>
        <span class="day">28/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">די</span>
        <span class="day">29/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">הי</span>
        <span class="day">30/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding">
        <span class="day">שי</span>
        <span class="day">31/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
  </div>
</div>

En caso de que desee una columna 2/7 o 3/7 y esté utilizando MENOS CSS para su desarrollo. Referencia: https://gist.github.com/kanakiyajay/15e4fc98248956614643

HTML

<div class="seven-cols">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-3"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

MENOS

/* CSS for 7 column responsive
-------------------------------------------------- */
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1,
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2,
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%*(1/7);
    *width: 100%*(1/7);
  }
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2 {
    width: 100%*(2/7);
    *width: 100%*(2/7);
  }
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%*(3/7);
    *width: 100%*(3/7);
  }
}

Si no tiene que usar el 100% del ancho, puede dividir su columna en 9 piezas iguales y usar solo las que están dentro:

<div class="row" style="border: solid 1px black; height: 200px;">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4 col-md-offset-4" id="Col1" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col2" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col3" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col4" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col5" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col6" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col7" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
</div>

<div class="col-sm-12">
                <div class="row">
                    <div class="col-xs-5">
                        <div class="row">
                            <div class="col-sm-4">01</div>
                            <div class="col-sm-4">02</div>
                            <div class="col-sm-4">03</div>
                        </div>
                    </div>
                    <div class="col-xs-2">
                        <div class="row">
                            <div class="col-sm-12">04</div>
                        </div>
                    </div>
                    <div class="col-xs-5">
                        <div class="row">
                            <div class="col-sm-4">05</div>
                            <div class="col-sm-4">06</div>
                            <div class="col-sm-4">07</div>
                        </div>
                    </div>                  
                </div>
            </div>
</div>

Con el sistema de cuadrícula de Bootstrap 3 puede envolver sus siete columnas en un div y usar la clase "col-md-offset". Por ejemplo:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-3">
      <div class="col-md-1 text-center">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>  
</div>

La desventaja es que está limitado a un tamaño de columna de 10. Si desea que sus 7 columnas ocupen toda la pantalla, alternativamente puede usar esto:

  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center" style="margin-left: 3%;">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>

Aquí el código de la pluma: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

Espero que esto ayude!

<div class="row">
  <div class="col-lg-1">Mon</div>
  <div class="col-lg-2">Tue</div>
  <div class="col-lg-2">Wen</div>
  <div class="col-lg-2">Thu</div>
  <div class="col-lg-2">Fri</div>
  <div class="col-lg-2">Sat</div>
  <div class="col-lg-1">Sun</div>
</div>

¿Esto resolverá su problema? El espacio inicial y la última columna se reducirán, pero no parece hacer demasiada diferencia.