7 равных столбцов в bootstrap

мне было интересно, может ли кто-нибудь объяснить, как я могу получить 7 равных столбцов в bootstrap? Я пытаюсь сделать календарь. Этот код, кажется, делает 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>

мой основной контент имеет следующий класс, поэтому я хотел бы, чтобы 7 столбцов сидели в этом:

col-lg-12

может кто-нибудь объяснить, если это возможно, или если я должен придерживаться даже вместо цифры?

14 62
html css twitter-bootstrap twitter-bootstrap-3

14 ответов:

Ну, ИМО вам, вероятно, нужно переопределить width столбцов с помощью CSS3 @media запрос.

вот моя попытка создать 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%;
  }
}

значение width от:

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

РАБОЧАЯ ДЕМОНСТРАЦИЯ

другие функции

кроме того, вы можете создать свою собственную версию 7-столбцов Twitter Bootstrap с помощью Custom Строитель (изменение @grid-columns, ...).

если вы используете меньше компилятор, вы можете скачать меньше версия Twitter Bootstrap (от Github) и редактировать variables.less файл вместо этого.

116

An почти равной,быстрая решение. Без пользовательского css.

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

Я хотел более точное решение этого, поэтому я сделал специальный набор классов row/col (семантически связанный с концепцией календаря).

это срывает путь Bootstrap строит базовую сетку (в grid-framework.less). Он сохраняет xs,sm,md и lg классы для настройки сетки на разных видовых экранах.

Примечание: это просто включает в себя стиль сетки; вам все равно придется написать остальное, чтобы сделать его на самом деле посмотреть как календарь.

Разметки

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

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

ваша проблема здесь заключается в том, что у вас есть нечетное число столбцов и, таким образом, вы не можете достичь симметрии. Поскольку каждый столбец-это один день недели, вы можете сказать, что все будни имеют col-md-2 класс и два других имеют col-md-1 класса.

этот подход будет работать на основе предположения, что в субботу и воскресенье нужно меньше места, но я не знаю, подходит ли это в вашем сценарии. 

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

демо здесь

4

обновление до Bootstrap 4, вероятно, является хорошим вариантом.

поставляется с классом col для столбцов равной ширины 

<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

3

@ Брэд ваш ответ был блестящим и элегантным, я немного изменил его для тех, кто использует sass. Обратите внимание, что комментарии в коде не мои, это просто те, что из базы кода начальной загрузки github. Я оставил их нетронутыми для справки.

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>

Сасс

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

вам нужно разделить 12-столбцовый макет начальной загрузки на 7 равных частей. Если вы идете вокруг изменения макета css, вы столкнетесь с теми же проблемами, скажем, разбив экран на 13 равных частей с макетом 14 столбцов.

кроме того, изменение макета столбца также заставит вас сделать много редизайна. Итак, я бы предложил вам использовать таблицу вместо этого. Вот так

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

имеет тот же эффект, что и cols, но его быстрее для каждого случая, когда вам нужен арбитр количество одинаковых блоков, которые будут напечатаны на экране программируемого PHP или иным образом.

Как и в отображении потока процессов, следующий сценарий может дать представление о том, как можно разбить стандартный экран с 12 столбцами на столько столбцов/единиц отображения, сколько вы хотите :

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

после ответа Энтони Гиббса, вы можете просто использовать Boostrap 4"col " класс 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>

вам не обязательно нужен Bootstrap 4, вы всегда можете просто скопировать объявления css из BS4 в свою собственную таблицу стилей.

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

это имеет то преимущество, что BS4 готов после миграции, а также дает возможность использовать 5, 7, 9 или 11 столбцы.

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

1

Я решил это простым способом. я просто использовал оправданную группу кнопок bootstrap, всего 7 оправданных кнопок, но вместо фактической кнопки я использовал span в контейнере кнопок div и нейтрализовал ненужные классы. это выглядит так (это было для еженедельного календаря тоже)

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

на всякий случай вы хотите 2/7 или 3/7 столбец, и вы используете меньше CSS для вашего развития. Ссылка: 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>

меньше

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

Если вам не нужно использовать 100% ширины, вы можете разделить свой столбец на 9 равных частей и использовать только те, что внутри:

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

С системой сетки Bootstrap 3 Вы можете обернуть свои семь столбцов в div и использовать класс "col-md-offset". Например:

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

недостатком является то, что вы ограничены размером столбца 10. Если вы хотите, чтобы ваши 7 столбцов занимали весь экран, вы можете также использовать это:

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

ручка кода здесь:https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

надеюсь, что это помогает!

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

это решит вашу проблему? Начальное и последнее пространство столбцов будет уменьшено, но это, похоже, не имеет большого значения.

-2