Подтвердить что ты не робот

Bootstrap - 5 колонок

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

Здесь код, который я использую

  <!-- Content Section -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12" style="border: 1px solid red">
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-2 col-xs-offset-1" id="p1">One</div>
              <div class="col-xs-2" id="p2">Two</div>
              <div class="col-xs-2" id="p3">Three</div>
              <div class="col-xs-2" id="p4">Four</div>
              <div class="col-xs-2" id="p5">Five</div>
            </div>
            <!-- //col-lg-12 -->
          </div>
          <!-- //row -->
          lorem
        </div>
      </div>
      <!-- //col-lg-12 -->
    </div>
    <!-- //row -->
  </div>
  <!-- //container -->

В результате я получаю введите описание изображения здесь

И вот что я пытаюсь достичь. Полная ширина 5-ти столбцов с пространством между каждым столбцом введите описание изображения здесь

4b9b3361

ОТВЕТЫ

Ответ 1

.col-xs-2{
    background:#00f;
    color:#FFF;
}
.col-half-offset{
    margin-left:4.166666667%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2" id="p1">One</div>
        <div class="col-xs-2 col-half-offset" id="p2">Two</div>
        <div class="col-xs-2 col-half-offset" id="p3">Three</div>
        <div class="col-xs-2 col-half-offset" id="p4">Four</div>
        <div class="col-xs-2 col-half-offset" id="p5">Five</div>
        <div>lorem</div>
    </div>
</div>

Ответ 2

5 колонок с начальной загрузкой 4

Вот 5 одинаковых столбцов полной ширины (без дополнительных CSS или 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 с помощью разрыва clearfix, такого как <div class="col-12"></div> или <div class="w-100"></div> very 5 колонны.

Ответ 3

Просто добавьте это в свой CSS

/* 5 Columns */

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

Ответ 4

Иногда мне предлагается использовать некоторые довольно нечетные макеты сетки на существующих сайтах начальной загрузки (без испорчения текущего кода). То, что я сделал, это создать отдельный файл CSS, который я могу просто добавить в текущие проекты начальной загрузки и использовать стили раскладки сетки. Вот что содержит файл bootstrap-5ths.css, а также пример того, как он ищет загрузочную версию 4.

Если вы хотите использовать это с начальной загрузкой версии 3, просто удалите стили col-xl- * и измените минимальную ширину от 576 пикселей до 768 пикселей, от 768 пикселей до 992 пикселей и от 992 пикселей до 1200 пикселей.

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

@media (min-width: 576px) {
    .col-sm-5ths {width: 20%;float: left;}
    .col-sm-two5ths {width: 40%;float: left;}
    .col-sm-three5ths {width: 60%;float: left;}
    .col-sm-four5ths {width: 80%;float: left;}
}

@media (min-width: 768px) {
    .col-md-5ths {width: 20%;float: left;}
    .col-md-two5ths {width: 40%;float: left;}
    .col-md-three5ths {width: 60%;float: left;}
    .col-md-four5ths {width: 80%;float: left;}
}

@media (min-width: 992px) {
    .col-lg-5ths {width: 20%;float: left;}
    .col-lg-two5ths {width: 40%;float: left;}
    .col-lg-three5ths {width: 60%;float: left;}
    .col-lg-four5ths {width: 80%;float: left;}
}

@media (min-width: 1200px) {
    .col-xl-5ths {width: 20%;float: left;}
    .col-xl-two5ths {width: 40%;float: left;}
    .col-xl-three5ths {width: 60%;float: left;}
    .col-xl-four5ths {width: 80%;float: left;}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-5ths">1</div>
  <div class="col-md-two5ths">2</div>
  <div class="col-md-two5ths">2</div>
</div>
<div class="row">
  <div class="col-md-three5ths">3</div>
  <div class="col-md-two5ths">2</div>
 </div>
<div class="row">
  <div class="col-md-four5ths">4</div>
  <div class="col-md-5ths">1</div>
 </div>
<div class="row">
  <div class="col-md-five5ths">5</div>
 </div>
 </div>

Ответ 5

Поместите некоторые margin-left во все зеленые divs, но не в первый

Ответ 6

Взгляните на эту страницу для общей информации о расположении Boostrap http://getbootstrap.com/css/#grid-offsetting

Попробуйте следующее:

<div class="col-xs-2" id="p1">One</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p2">Two</div>
</div>
<div class="col-xs-2" id="p3">Three</div>
<div class="col-xs-3">
  <div class="col-xs-8 col-xs-offset-2" id="p4">Four</div>
</div>
<div class="col-xs-2" id="p5">Five</div>

Я разделил ширину на 5 неровных div с col-xs- 2,3,2,3,2 соответственно. Два div с col-xs-3 равны 1,5x размеру col-xs-2 div, поэтому ширина столбца должна быть 2/3x (1.5 x 2/3 = 1) ширины col-xs-3, чтобы соответствовать остальным.

Ответ 7

CSS

.bg{
    background-color: #9DC3E6;
    border-radius: 10px;
    color: #fff;
    padding: 15px;
}
.col-xs-5-cols,
.col-sm-5-cols,
.col-md-5-cols,
.col-lg-5-cols {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

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

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

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

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

HTML

<div className="row">
    <div className="col-md-5-cols">1<div className="bg"></div></div>
    <div className="col-md-5-cols">2<div className="bg"></div></div>
    <div className="col-md-5-cols">3<div className="bg"></div></div>
    <div className="col-md-5-cols">4<div className="bg"></div></div>
    <div className="col-md-5-cols">5<div className="bg"></div></div>
</div>

Ответ 8

Если вы хотите принудительно установить ширину столбца 20% для каждой имеющейся у вас строки, даже если у вас нет 5 столбцов в некоторых строках, вам придется добавить в файл CSS или Scss следующее:

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

    .col-xs-5-cols {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
    @media (min-width: 768px) {
        .col-sm-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 992px) {
        .col-md-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }
    @media (min-width: 1200px) {
        .col-lg-5-cols {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }
    }

И в своем HTML, используйте добавленный класс следующим образом:

<div class="row">
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
        <div class="col-lg-5-cols"></div>
</div>

Ответ 9

Это лучше, вы можете использовать любой подсчет div.

.col-xs-2{
    background:#00f;
    color:#FFF;
}

.col_item {
    margin-left:4.166666667%
}
.col_item:first-child,
.col_item:nth-child(5n+1) {
    margin-left: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row" style="border: 1px solid red">
        <div class="col-xs-2 col_item" id="p1">One</div>
        <div class="col-xs-2 col_item" id="p2">Two</div>
        <div class="col-xs-2 col_item" id="p3">Three</div>
        <div class="col-xs-2 col_item" id="p4">Four</div>
        <div class="col-xs-2 col_item" id="p5">Five</div>
        <div class="col-xs-2 col_item" id="p5">One</div>
    </div>
</div>

Ответ 10

Лучший способ честно сделать это - изменить количество столбцов, которые у вас есть, вместо того, чтобы пытаться привязать 5 к 12.

Лучшее количество, которое вы, вероятно, могли бы использовать, равно 20, поскольку оно делится на 2, 4 и 5.

Итак, в variables.less найдите @grid-columns: 12 и измените это на 20.

Затем измените свой html на:

      <div class="row">
        <div class="col-xs-20">
          <div class="col-xs-4" id="p1">One</div>
          <div class="col-xs-4" id="p2">Two</div>
          <div class="col-xs-4" id="p3">Three</div>
          <div class="col-xs-4" id="p4">Four</div>
          <div class="col-xs-4" id="p5">Five</div>
        </div>
        <!-- //col-lg-20 -->
      </div>

Я лично использовал бы display: flex для этого, поскольку бутстрап не был разработан специально для разбиения на 5 столбцов.

Ответ 11

Copypastable версия wearesicc 5 col solution с переменными бутстрапа:

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: $screen-sm) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-md) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: $screen-lg) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

Ответ 12

можно использовать, как показано ниже, в bootstrap3:

<div class="row">

    <div class="col-md-2 col-md-offset-1">One</div>
    <div class="col-md-2">Two</div>
    <div class="col-md-2">Three</div>
    <div class="col-md-2">Four</div>
    <div class="col-md-2">Five</div>

</div>

Ответ 13

Вот еще один простой способ сделать это, добавив ширину 20% к каждому col-xs-2:

<div class="col-xs-12">
     <div class="col-xs-2" style="width:20%;" id="p1">One</div>
     <div class="col-xs-2" style="width:20%;" id="p2">Two</div>
     <div class="col-xs-2" style="width:20%;" id="p3">Three</div>
     <div class="col-xs-2" style="width:20%;" id="p4">Four</div>
     <div class="col-xs-2" style="width:20%;" id="p5">Five</div>
</div>