7 colonnes égales dans le bootstrap
Je me demandais si quelqu'un pourrait expliquer comment je peux obtenir 7 colonnes égales dans le bootstrap? J'essaie de faire un calendrier. Ce code semble faire 5:
div class="row">
<div class="col-md-2 col-md-offset-1"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Mon contenu principal a la classe suivante, je voudrais donc que les 7 colonnes s’inscrivent dans ceci:
col-lg-12
Quelqu'un peut-il expliquer si cela est possible ou si je dois m'en tenir à des nombres pairs?
Eh bien, IMO, vous devez probablement remplacer la width des colonnes en utilisant la requête CSS3 @media.
Voici ma tentative de créer un système de grille à 7 colonnes:
<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%;
}
}
La valeur de width provient de:
width = 100% / 7 column-number = 14.285714285714285714285714285714%
Autres options
En outre, vous pouvez créer votre propre version à 7 colonnes de Twitter Bootstrap en utilisant le Générateur personnalisé Custom Builder (en modifiant le @grid-columns, ...).
Si vous utilisez le compilateur moins, vous pouvez télécharger la version moins de Twitter Bootstrap (à partir de Github ) et modifier le fichier variables.less à la place.
Un presque égal , rapide solution. Sans css personnalisé.
<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>
Mettre à jour vers Bootstrap 4 est probablement une bonne option.
Livré avec un col de classe pour des colonnes d'égale largeur
<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
Conseils: Si vous souhaitez séparer les colonnes des nouvelles lignes lorsque l'écran est inférieur à md, ajoutez cette division après chaque colonne:
<div class='w-100 d-md-none'></div>
.w-100 passe à une nouvelle ligne et .d-md-done masque la div sur des écrans plus larges que md
Donc cela donnerait:
<div class="row">
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
<div class='w-100 d-md-none'></div>
<div class="col"></div>
</div>
Votre problème ici est que vous avez un nombre impair de colonnes et que vous ne pouvez donc pas atteindre la symétrie. Comme chaque colonne correspond à un jour de la semaine, vous pouvez dire que tous les jours de la semaine ont la classe col-md-2 et les deux autres ont la classe col-md-1.
Cette approche fonctionnera en partant du principe que samedi et dimanche ont besoin de moins d’espace, mais je ne sais pas si cela convient à votre scénario.
<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>
Une démo est ici
Après Antony Gibbs, vous pouvez simplement utiliser la classe css Boostrap 4 "col":
<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>
Vous n’avez pas nécessairement besoin de Bootstrap 4, vous pouvez toujours simplement copier les déclarations css de BS4 dans votre propre feuille de style.
/* 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;
}
Cela présente l'avantage d'être prêt pour BS4 une fois que vous avez migré et vous donne également la possibilité d'utiliser 5, 7, 9 ou 11 colonnes.
@ Brad, ta réponse était brillante et élégante, je l'ai légèrement modifiée pour ceux qui utilisent sass. Veuillez noter que les commentaires dans le code ne sont pas les miens, ils sont simplement ceux de la base de code de github bootstrap. Je les ai laissés intacts pour référence.
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);
}
Vous devez diviser une disposition bootstrap de 12 colonnes en 7 parties égales. Si vous changez la disposition css, vous rencontrerez les mêmes problèmes, par exemple, en divisant un écran en 13 parties égales avec une disposition en 14 colonnes.
De plus, changer la disposition des colonnes vous obligera à refaire beaucoup de travail. Donc, je vous suggère d'utiliser la table à la place. Comme ça
<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>
A le même effet que les colonnes, mais est plus rapide au cas par cas lorsque vous avez besoin d'imprimer un nombre arbitraire de blocs égaux à l'écran, par programmation, par PHP ou autrement.
Comme dans un affichage de flux de processus, le script suivant peut donner une idée de la manière dont on peut diviser un écran standard à 12 colonnes en autant de colonnes/unités d'affichage que vous le souhaitez:
$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>";
<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>
Si vous n'avez pas à utiliser 100% de la largeur, vous pouvez diviser votre colonne en 9 parties égales et n'utiliser que celles à l'intérieur:
<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>
Juste au cas où vous voudriez une colonne 2/7 ou 3/7 et que vous utilisiez moins de CSS pour votre développement ..__ Référence: 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>
MOINS
/* 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);
}
}
Vous utilisez déjà Bootstrap. Par conséquent, si vous connaissez bien SCSS, vous pouvez utiliser l'un des mixins existants de Bootstrap pour créer un système de grille personnalisé à 7 colonnes avec des classes étendues à un conteneur spécifique.
my_custom_app.scss:
//include bootstrap SCSS (for variables and mixins)
@import '../node_modules/bootstrap/scss/bootstrap';
//overwrite 2 bootstrap variables
$grid-columns: 7;
$grid-Gutter-width: 4px;
//define your custom container
#task_week {
//call bootstrap's mixin
@include make-grid-columns();
}
Lorsque vous compilez my_custom_app.scss , le mixin générera automatiquement toutes les classes col-x dont vous avez besoin dans le fichier CSS résultant, que j'ai inclus ici dans son intégralité pour les plus sensibles:
#task_week {}
#task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col-8, #task_week .col-9, #task_week .col-10, #task_week .col-11, #task_week .col-12, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm-8, #task_week .col-sm-9, #task_week .col-sm-10, #task_week .col-sm-11, #task_week .col-sm-12, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md-8, #task_week .col-md-9, #task_week .col-md-10, #task_week .col-md-11, #task_week .col-md-12, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg-8, #task_week .col-lg-9, #task_week .col-lg-10, #task_week .col-lg-11, #task_week .col-lg-12, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl-8, #task_week .col-xl-9, #task_week .col-xl-10, #task_week .col-xl-11, #task_week .col-xl-12, #task_week .col-xl,
#task_week .col-xl-auto, #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col,
#task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm,
#task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md,
#task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg,
#task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl,
#task_week .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 2px;
padding-left: 2px; }
#task_week .col {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-first {
order: -1; }
#task_week .order-last {
order: 8; }
#task_week .order-0 {
order: 0; }
#task_week .order-1 {
order: 1; }
#task_week .order-2 {
order: 2; }
#task_week .order-3 {
order: 3; }
#task_week .order-4 {
order: 4; }
#task_week .order-5 {
order: 5; }
#task_week .order-6 {
order: 6; }
#task_week .order-7 {
order: 7; }
#task_week .offset-1 {
margin-left: 14.2857142857%; }
#task_week .offset-2 {
margin-left: 28.5714285714%; }
#task_week .offset-3 {
margin-left: 42.8571428571%; }
#task_week .offset-4 {
margin-left: 57.1428571429%; }
#task_week .offset-5 {
margin-left: 71.4285714286%; }
#task_week .offset-6 {
margin-left: 85.7142857143%; }
@media (min-width: 576px) {
#task_week .col-sm {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-sm-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-sm-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-sm-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-sm-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-sm-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-sm-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-sm-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-sm-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-sm-first {
order: -1; }
#task_week .order-sm-last {
order: 8; }
#task_week .order-sm-0 {
order: 0; }
#task_week .order-sm-1 {
order: 1; }
#task_week .order-sm-2 {
order: 2; }
#task_week .order-sm-3 {
order: 3; }
#task_week .order-sm-4 {
order: 4; }
#task_week .order-sm-5 {
order: 5; }
#task_week .order-sm-6 {
order: 6; }
#task_week .order-sm-7 {
order: 7; }
#task_week .offset-sm-0 {
margin-left: 0; }
#task_week .offset-sm-1 {
margin-left: 14.2857142857%; }
#task_week .offset-sm-2 {
margin-left: 28.5714285714%; }
#task_week .offset-sm-3 {
margin-left: 42.8571428571%; }
#task_week .offset-sm-4 {
margin-left: 57.1428571429%; }
#task_week .offset-sm-5 {
margin-left: 71.4285714286%; }
#task_week .offset-sm-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 768px) {
#task_week .col-md {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-md-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-md-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-md-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-md-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-md-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-md-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-md-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-md-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-md-first {
order: -1; }
#task_week .order-md-last {
order: 8; }
#task_week .order-md-0 {
order: 0; }
#task_week .order-md-1 {
order: 1; }
#task_week .order-md-2 {
order: 2; }
#task_week .order-md-3 {
order: 3; }
#task_week .order-md-4 {
order: 4; }
#task_week .order-md-5 {
order: 5; }
#task_week .order-md-6 {
order: 6; }
#task_week .order-md-7 {
order: 7; }
#task_week .offset-md-0 {
margin-left: 0; }
#task_week .offset-md-1 {
margin-left: 14.2857142857%; }
#task_week .offset-md-2 {
margin-left: 28.5714285714%; }
#task_week .offset-md-3 {
margin-left: 42.8571428571%; }
#task_week .offset-md-4 {
margin-left: 57.1428571429%; }
#task_week .offset-md-5 {
margin-left: 71.4285714286%; }
#task_week .offset-md-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 992px) {
#task_week .col-lg {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-lg-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-lg-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-lg-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-lg-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-lg-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-lg-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-lg-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-lg-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-lg-first {
order: -1; }
#task_week .order-lg-last {
order: 8; }
#task_week .order-lg-0 {
order: 0; }
#task_week .order-lg-1 {
order: 1; }
#task_week .order-lg-2 {
order: 2; }
#task_week .order-lg-3 {
order: 3; }
#task_week .order-lg-4 {
order: 4; }
#task_week .order-lg-5 {
order: 5; }
#task_week .order-lg-6 {
order: 6; }
#task_week .order-lg-7 {
order: 7; }
#task_week .offset-lg-0 {
margin-left: 0; }
#task_week .offset-lg-1 {
margin-left: 14.2857142857%; }
#task_week .offset-lg-2 {
margin-left: 28.5714285714%; }
#task_week .offset-lg-3 {
margin-left: 42.8571428571%; }
#task_week .offset-lg-4 {
margin-left: 57.1428571429%; }
#task_week .offset-lg-5 {
margin-left: 71.4285714286%; }
#task_week .offset-lg-6 {
margin-left: 85.7142857143%; } }
@media (min-width: 1200px) {
#task_week .col-xl {
flex-basis: 0;
flex-grow: 1;
max-width: 100%; }
#task_week .col-xl-auto {
flex: 0 0 auto;
width: auto;
max-width: none; }
#task_week .col-xl-1 {
flex: 0 0 14.2857142857%;
max-width: 14.2857142857%; }
#task_week .col-xl-2 {
flex: 0 0 28.5714285714%;
max-width: 28.5714285714%; }
#task_week .col-xl-3 {
flex: 0 0 42.8571428571%;
max-width: 42.8571428571%; }
#task_week .col-xl-4 {
flex: 0 0 57.1428571429%;
max-width: 57.1428571429%; }
#task_week .col-xl-5 {
flex: 0 0 71.4285714286%;
max-width: 71.4285714286%; }
#task_week .col-xl-6 {
flex: 0 0 85.7142857143%;
max-width: 85.7142857143%; }
#task_week .col-xl-7 {
flex: 0 0 100%;
max-width: 100%; }
#task_week .order-xl-first {
order: -1; }
#task_week .order-xl-last {
order: 8; }
#task_week .order-xl-0 {
order: 0; }
#task_week .order-xl-1 {
order: 1; }
#task_week .order-xl-2 {
order: 2; }
#task_week .order-xl-3 {
order: 3; }
#task_week .order-xl-4 {
order: 4; }
#task_week .order-xl-5 {
order: 5; }
#task_week .order-xl-6 {
order: 6; }
#task_week .order-xl-7 {
order: 7; }
#task_week .offset-xl-0 {
margin-left: 0; }
#task_week .offset-xl-1 {
margin-left: 14.2857142857%; }
#task_week .offset-xl-2 {
margin-left: 28.5714285714%; }
#task_week .offset-xl-3 {
margin-left: 42.8571428571%; }
#task_week .offset-xl-4 {
margin-left: 57.1428571429%; }
#task_week .offset-xl-5 {
margin-left: 71.4285714286%; }
#task_week .offset-xl-6 {
margin-left: 85.7142857143%; } }
#task_week div {
text-align: center; }
#task_week div .dow_day {
display: block;
font-size: 16px;
color: #4be4ff;
font-weight: normal; }
#task_week div .dow_date {
font-size: 12px;
display: block;
margin: 0;
margin-bottom: 10px;
font-weight: normal; }
#task_week .list-group-item, #task_week .list-group-item * {
cursor: pointer; }
#task_week .list-group-item:hover {
background-color: #161919; }
#task_week .col:not(:last-child) {
border-right: 1px solid #444;
margin-bottom: 20px; }
Enfin, dans votre code HTML, vous définissez simplement votre div wrapper et vos colonnes comme vous le feriez avec la grille par défaut de 12 colonnes:
<div id="task_week">
<div class="row no-gutters">
<div class="col-sm-7 col-lg-1">Monday</div>
<div class="col-sm-7 col-lg-1">Tuesday</div>
<div class="col-sm-7 col-lg-1">Wednesday</div>
<div class="col-sm-7 col-lg-1">Thursday</div>
<div class="col-sm-7 col-lg-1">Friday</div>
<div class="col-sm-7 col-lg-1">Saturday</div>
<div class="col-sm-7 col-lg-1">Sunday</div>
</div>
</div>
Je l'ai résolu d'une manière simple. Je viens d'utiliser un groupe de boutons justifié d'amorçage, juste 7 boutons justifiés, mais au lieu du bouton réel, j'ai utilisé span dans le conteneur de boutons div et neutralisé les classes inutiles. ça ressemble à ça (c'était aussi pour un calendrier hebdomadaire)
<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>
Avec le système de grille de Bootstrap 3, vous pouvez envelopper vos sept colonnes dans une div et utiliser la classe "col-md-offset". Par exemple:
<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>
L'inconvénient est que vous êtes limité à une taille de colonne de 10. Si vous souhaitez que vos 7 colonnes occupent tout l'écran, vous pouvez également utiliser ceci:
<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>
stylo code ici: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010
J'espère que cela t'aides!