Вопрос по twitter-bootstrap, twitter-bootstrap-3, bootstrap-4 – Пять равных столбцов в твиттере

320

Я хочу, чтобы на странице, которую я строю, было 5 одинаковых столбцов, и я не могу понять, как здесь используется сетка из 5 столбцов: http://web.archive.org/web/20120416024539/http://domain7.com/mobile/tools/bootstrap/responsive

Является ли сетка из пяти столбцов, показанная выше, частью платформы начальной загрузки Twitter?

Я имею в виду, что если элементы сетки будут изменены, чтобы приспособить настройку с 5 сетками, то адаптивная функция также должна быть сильно модифицирована для их поддержки. Andres Ilich
Я только что понял, что заявленный v1.3.0 и текущий 2.0.2. Последняя версия - сетка с 12 столбцами, означая, что я могу иметь 2,3,4 и 6 равных столбцов. Что я спрашивал, если было бы возможно иметь 5 одинаковых столбцов без необходимости что-либо менять. Gandalf
Вы смотрите на очень старую версию начальной загрузки. Вы хотите иметь 5-колоночный "отзывчивый"? сетка на (последней, я надеюсь) начальной загрузке? Andres Ilich
Да, сайт отзывчивый, но мне бы тоже пришлось изменить элементы сетки, а не отзывчивую часть, только imho. Gandalf
Вы можете, да, но это потребует значительных модификаций некоторых элементов сетки, а также адаптивных элементов сетки. Ваш сайт вообще отзывчив? Было бы немного проще найти ответ таким образом, иначе было бы много кода. Andres Ilich

Ваш Ответ

30   ответов
2

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

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

и некоторый HTML-код

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>
1

основанные на определениях начальной загрузки для любого числа столбцов (лично кроме 12 я использую 8, 10 и 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


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

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

И вы можете просто создавать классы:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

Я надеюсь, что кто-то найдет это полезным

1

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

И если вам нужно, чтобы они вышли за пределы любой точки останова, просто сделайте блок btn-group. Надеюсь, это кому-нибудь поможет.

6

http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}
<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

flexbox лучше, чем начальная загрузка, если он соответствует вашим потребностям.
9

exact При одинаковой ширине столбцов вы можете попробовать создать 5 столбцов, используя вложенность:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

Первые два столбца будут иметь ширину, равную 5/12 * 1/2 ~ 20,83%

Последние три столбца: 7/12 * 1/3 ~ 19,44%

Такой взлом во многих случаях дает приемлемый результат и не требует каких-либо изменений CSS (мы используем только собственные классы начальной загрузки).

хахах ты умный мофо. очень красиво сделано;)
3

толбцов, используемый Bootstrap по умолчанию. А затем создайте сетку из 20 столбцов (используйте настройку на веб-сайте Bootstrap ИЛИ используйте версию LESS / SASS).

Чтобы настроить на сайте начальной загрузки, перейдите кНастроить и скачать страница, обновить переменную@grid-columns от12 в20, Тогда вы сможете создать 4 и 5 столбцов.

373

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Вуаля! Пять равноотстоящих и центрированных столбцов.

В начальной загрузке 3.0 этот код будет выглядеть

<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>
Не идет на полную ширину, как ответ @fizzix, приведенный ниже. Создает нежелательные поля с обеих сторон, вот так -jsfiddle.net/wdo8L1ww
Размещенное мной решение выходит на полную ширину и создает 5 одинаковых столбцов:HERE IS THE ANSWER.
он не идет на полную ширину. это хорошо, хотя
Bootstrap 4 5 столбцов (полная ширина) не требует CSS или SASS:stackoverflow.com/a/42226652/171456
столбцы выглядят довольно маленькими в этом решении, поэтому я предпочитаю решение @fizzix
1

5 columns layout with Twitter Bootstrap style

.    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .
        width: 20%;
        float: left;
    }
}
0

го:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
2

Этот ответ основан наответ от @fizzix

Таким образом, столбцы используют переменные (@ grid-gutter-width, точки прерывания мультимедиа), которые пользователь может переопределить, и поведение пяти столбцов соответствует поведению сетки из 12 столбцов.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */
5

но, посмотрев на это еще раз, я предлагаю сделать следующее, лучше, если вы сохраните поля по умолчанию и т. Д.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}
Фактическая ширина17.94872% и это не отвечает, вам нужно будет установить новое поле для каждого столбца во всех запросах @media.
1

я думаю, мы можем сделать что-то подобное для удаления левого и правого поля:

<div class="row this_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>

и CSS

.this_row {
    margin: 0 -5%;
}
2

грузки CSS.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>​<!-- end outer row -->

Тогда немного CSS

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Вот пример:Пример 5 равных столбцов

И вот мой полный переписывайся на coderwall

Пять равных столбцов в начальной загрузке 3

2

которое не требует большого количества CSS или настройки начальной загрузки 12col по умолчанию:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}
1

Но с Bootstrap v4 (альфа) есть 2 вещи, которые помогут со сложной структурой сетки

Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), the new element type (official - https://www.w3.org/TR/css-flexbox-1/) Responsive utilities (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

Проще говоря, я использую

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

Будь то 5,7,9,11,13 или что-то в этом роде, все будет хорошо. Я совершенно уверен, что стандарт 12 сеток способен обслуживать более 90% сценария использования, поэтому давайте так и будем разрабатывать дизайн таким же образом!

Хорошее учебное пособие по гибкой технологии здесь & quot;https://css-tricks.com/snippets/css/a-guide-to-flexbox/& Quot;

30

переписанный для Bootstrap 3 (пока что у меня хорошо работает):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
Где я могу разместить это и как мне это использовать?
@Ganders просто из виду; проверьте другой ответ на этой странице:stackoverflow.com/questions/10387740/…
@Serg 1. Поместите его под / после файла Bootstrap css 2. Добавьте класс .fivecolumns в .row, затем вложите пять столбцов с классом .col [, - sm, -lg] -2
В некоторых случаях не получается идеально полной ширины.
Почему col-xs-2 не добавляется в объявления?
8
Create a custom Bootstrap download for 5 column layout

Bootstrap 2.3.2 (или жеBootstrap 3) страницу настройки и установите следующие переменные (не вводите точки с запятой):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Загрузите вашу сборку. Эта сетка будет вписываться в контейнеры по умолчанию, сохраняя ширину желоба по умолчанию (почти).

Note: Если вы используете LESS, обновитеvariables.less вместо.

0

.  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}

1

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width:, 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }
<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Фрагмент кода не работает.
21
Update 2018

Bootstrap 4.0

Вот 5 одинаковых столбцов полной ширины (no extra CSS or SASS) с использованиемавтоматическая разметка сетки:

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

Это решение работает, потому что Bootstrap 4 теперь является flexbox. Вы можете получить 5 столбцов, чтобы обернуть в одном и том же.row используя перерыв в очистке, такой как<div class="col-12"></div> или же<div class="w-100"></div> каждые 5 колонок.

Также см:Bootstrap - 5 колонок

Не могу дождаться, пока он станет стабильным :)
Хорошо, но работает только с рядами из 5 элементов. Если вы получаете больше, вы ошибаетесь. Смотрите мою усиленную скрипку здесь:jsfiddle.net/djibe89/ntq8h910
Вот почему я объяснил, что вы должны использовать разрыв каждые 5 столбцов. Ваше решение работает, но требует дополнительного CSS.
2

чает, что если мы хотим создать макет с 12 столбцами равной ширины, мы должны написать внутри div class = & quot; col-md-1 & quot; двенадцать раз.

<div class="row">
<div class="col-md-1"></div>    
<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"></div>
</div>
2

ие для каждого медиазапроса.

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

вот рабочая демкаhttps://codepen.io/giorgosk/pen/BRVorW

26

не настраивайте его. Единственное изменение, которое вам нужно сделать, это немного CSSafter оригинальный загрузочный отзывчивый css, вот так:

Следующий код был протестирован для Bootstrap 2.3.2:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

И HTML:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <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 &raquo;</a></p>
    </div>
    <div class="span2">
        <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 &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Note: Даже если span2 умножить на 5 не равно 12 столбцам, вы поймете, что идея :)

Рабочий пример можно найти здесьhttp://jsfiddle.net/v3Uy5/6/

Я застрял с Bootstrap 2.3.2, и это прекрасно работает. Спасибо!
Работает довольно хорошо. Спасибо :)
самое полезное и простое! спасибо машина
161

Bootstrap 3, если ты хочешьfull-width и используютLESS, SASSили что-то подобное, все, что вам нужно сделать, это использоватьBootstrap 's mixin функции make-md-column, make-sm-column, так далее.

МЕНЬШЕ:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

Вы можете не только строитьtrue full-width bootstrap column classes используя эти миксины, но вы также можете построить всеrelated helper classes лайк.col-md-push-*, .col-md-pull-*, а также.col-md-offset-*:

МЕНЬШЕ:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

Другие ответы говорят о настройке@gridColumns что совершенно правильно, но это изменяет ширину столбца ядра для всей начальной загрузки. Использование вышеперечисленных функций mixin добавит макет из 5 столбцов поверх столбцов начальной загрузки по умолчанию, поэтому он не нарушит какие-либо сторонние инструменты или существующие стили.

Это должен быть лучший ответ. Я создал библиотеку (чтобы включитьoffset, pull а такжеpush) на основании этого для моего собственного использования. Не стесняйтесьcheck it out
это должен быть лучший ответ
@ lightswitch05 К сожалению, это мне не подошло, так как у меня было динамическое количество столбцов. Если бы у меня был только один столбец, я все равно хотел бы, чтобы он занимал 5-ю часть экрана, но, используя ответ Fizzix, один столбец охватывал бы весь экран. Мне удалось решить эту проблему с помощью новых миксин-функций Bootstrap 4. Я мог бы обновить ваш ответ, чтобы включить это, если хотите?
Чистое решение, как2.4 является пятым из 12 (2.4*5=12), работает для Bootstrap 3 в сетке из 12 столбцов. Также относится кmake-xs, make-sm, но он не будет работать в сочетании с другими стандартными определениями col (последний получает приоритет)
Я шокирован сравнительно небольшим количеством голосов за этот ответ. Он, безусловно, наименее хакерский, использующий не только те же правила именования, что и другие классы столбцов Bootstrap, но и те же миксины, которые Bootstrap использует для создания своих собственных столбцов, что делает его, вероятно, перспективным до Bootstrap 4, по крайней мере.
461
For Bootstrap 3 and above

full width Создан макет из 5 колонок с Twitter BootstrapВот.

Это, безусловно, самое передовое решение, поскольку оно безупречно работает с Bootstrap 3. Оно позволяет вам снова и снова использовать классы в паре с текущими классами Bootstrap для адаптивного проектирования.

CSS:
Добавьте это к вашей глобальной таблице стилей или даже к нижней части вашегоbootstrap.css документ.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Put it to use!
Например, если вы хотите создать элемент div, который ведет себя как пять столбцов на средних экранах и как два столбца на маленьких экранах, вам просто нужно использовать что-то вроде этого:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

WORKING DEMO - Разверните рамку, чтобы столбцы стали отзывчивыми.

ANOTHER DEMO - Включение новогоcol-*-5ths занятия с другими, такими какcol-*-3 а такжеcol-*-2, Измените размер рамки, чтобы увидеть, как все они изменились наcol-xs-6 в отзывчивом виде.

For Bootstrap 4

Bootstrap 4 теперь по умолчанию использует flexbox, поэтому вы получаете доступ к его магическим силам прямо из коробки. Проверьтеавтоматическое расположение столбцов это динамически регулирует ширину в зависимости от того, сколько столбцов вложено.

Вот пример:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

WORKING DEMO

Называя ихcol-*-15 может быть запутанным. Похоже, они подразумевают, что они являются частью грид-системы из 15 столбцов, которой они не являются.
как насчет именования колонок 2/5? Или мы должны использовать: col-md-1ths для 1/5 и col-md-2ths для 2/5, col-md-5ths для 5/5 = полная ширина?
@ PaulD.Waite - я добавил небольшую заметку к своему ответу, чтобы люди знали.
Привет, @scragar. Если вы посмотрите на стили для всех текущих классов столбцов Bootstrap, вы заметите, что все они содержатposition:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;, По сути, код, который я разместил, просто расширяет его, чтобы они точно соответствовали встроенному стилю Bootstrap. Затем я применяю ширину20% так что 5 одинаковых столбцов могут поместиться по всей странице. Очень просто :)
col-*-15 хорошо со мной, ноcol-*-5ths может быть немного менее запутанным именем столбца. Это то, что я использую, чтобы мои другие разработчики не пришли в замешательство.
1
Bootstrap 4, variable number of columns per row

up to пять столбцов в строке, так что меньшее количество столбцов по-прежнему занимает только 1/5 строки в каждом, решение состоит в том, чтобы использовать Bootstrap 4 'sПримеси:

SCSS:

.col-2-4 {
  @include make-col-ready(); // apply standard column margins, padding, etc.
  @include make-col(2.4); // 12/5 = 2.4
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-2-4">1 of 5</div>
    <div class="col-2-4">2 of 5</div>
    <div class="col-2-4">3 of 5</div>
    <div class="col-2-4">4 of 5</div>
    <div class="col-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>
2

http://www.ianmccullough.net/5-column-bootstrap-layout/

Просто делать:

<div class="col-xs-2 col-xs-15">

И CSS:

.col-xs-15{
    width:20%;
}
4
<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}
это должно быть .equal .span2 {ширина: 20%; }
... и это НЕ работает. каждый столбец, кроме первого, имеет оставленное поле.
1

вот простой код для 5 столбцов, использующий загрузки начальной загрузки:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Убедитесь, что вы включили:

@import "bootstrap/variables";
@import "bootstrap/mixins";
спасибо, это было то, что я искал, я сделал 1-5ths 2-5ths и т. д. и даже 3-10ths и т. д. сейчас, чтобы иметь больше гибкости, очень удобно
4

также класс col-sm-offset-1

Постскриптум это не будет полная ширина (будет немного отступать справа и слева от экрана)

Код должен выглядеть примерно так

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

Похожие вопросы