7 gleiche Spalten im Bootstrap

Gut, IMO, die Sie wahrscheinlich benötigen, um das überschreiben der width der Spalten mit CSS3 @media Abfrage.

Hier ist mein Versuch, erstellen Sie eine 7-col grid-system:

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

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

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

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

Den Wert width kommt von:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

ARBEITEN DEMO

Andere Optionen

Außerdem könnten Sie bauen Sie Ihren eigenen 7-Spalten-version von Twitter Bootstrap mithilfe der Custom Builder (Änderung der @grid-columns...).

Wenn Sie weniger compiler, Sie könnten download der weniger version von Twitter Bootstrap (von Github) und Bearbeiten Sie die - Variablen.less - Datei statt.

InformationsquelleAutor der Antwort Hashem Qolami

Wollte ich eine genauere Lösung, also machte ich eine spezielle Zeile/col class set (semantisch gebunden an das Konzept eines Kalenders).

Diese rips aus dem Weg Bootstrap baut die base grid (in grid-framework.less). Es behält die xssmmdund lg Klassen für die Anpassung des Gitters an verschiedenen viewports.

Hinweis: diese beinhaltet nur die grid-styling; Sie haben immer noch den rest zu schreiben, um es tatsächlich Aussehen wie ein Kalender.

Markup

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

Die .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);
}

InformationsquelleAutor der Antwort Brad

@Brad Ihre Antwort war Brillant und elegant, ich veränderte es etwas für diejenigen, die sich mit sass. Bitte beachten Sie die Kommentare im code sind nicht von mir Sie sind einfach diejenigen, die aus dem github bootstrap-code-Basis. Ich verließ Sie intakt für die Referenz.

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);
}

InformationsquelleAutor der Antwort Zanderi

Müssen Sie Spalten, 12 Spalten bootstrap-layout in 7 gleiche Teile. Wenn Sie gehen, um die änderung der css-layout, werden Sie vor den gleichen Problemen mit brechen einen Bildschirm in 13 gleiche Teile, die mit einem 14-Spalten-layout.

Neben, ändern die Anordnung der Spalten auch machen, Sie tun eine Menge für die Neugestaltung. Also, ich würde dir empfehlen die Verwendung von Tabellen statt. Wie diese

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

Den gleichen Effekt hat wie die cols, aber seine schneller für eine Fall-zu-Fall-basis, wo Sie brauchen, beliebigen Anzahl von gleichen Blöcken gedruckt werden auf dem Bildschirm programmatischen durch PHP oder sonst.

Wie in einem Prozessablauf angezeigt, kann das folgende Skript geben der Idee, wie kann man brechen, eine standard-12-Spalten-Bildschirm in so viele Spalten/Anzeige-Einheiten, wie Sie wollen :

$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>";

InformationsquelleAutor der Antwort Arpan Dubey

Nur für den Fall Sie wollen eine 2/7 oder 3/7 Spalte und Sie sind mit WENIGER CSS für Ihre Entwicklung.
Referenz: 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>

WENIGER

/* 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);
  }
}

InformationsquelleAutor der Antwort Eddy Goh

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

InformationsquelleAutor der Antwort Meisterunner

Mit Bootstrap 3 grid-system-Sie können wickeln Sie Ihre sieben Säulen in ein div und verwenden Sie den "col-md-offset" - Klasse. Zum Beispiel:

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

Der Nachteil ist, dass Sie beschränken sich auf eine Spalte die Größe 10. Wenn Sie möchten, dass Ihre, und 7 Spalten nehmen den gesamten Bildschirm, können Sie alternativ auch diese:

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

code-Stift hier: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

Hoffe, das hilft!

InformationsquelleAutor der Antwort Dylan Prem