вертикальный разделитель между двумя столбцами в бутстрапе

Я использую twitter bootstrap и имею строку, которая имеет два столбца (span6). Как создать вертикальный разделитель между двумя пролетами.

Благодаря, Муртаза

56
Я сделал версию, которая не требует дополнительных элементов: stackoverflow.com/questions/11815081/…
добавлено автор Ross Angus, источник

10 ответы

Если ваш код выглядит так:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

Тогда я предполагаю, что вы используете дополнительные DIVS в DIVS «span6» для хранения/стилизации вашего контента? Так...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

Таким образом, вы можете просто добавить CSS в класс «mycontent-left», чтобы создать свой разделитель.

.mycontent-left {
  border-right: 1px dashed #333;
}
68
добавлено
Если столбцы имеют разную высоту, вы можете сделать линию до конца, установив min-height: 100%; height: 100%; в CSS для контейнера div и div s, содержащий каждый столбец.
добавлено автор raul, источник
проблема с вышесказанным заключается в том, что она граничит с моим контентом в первом пролете. В первом пролете у меня есть форма, и граница обнимает ее содержимое. Как я могу отделить его?
добавлено автор murtaza52, источник
Простой - добавьте некоторые дополнения в контент-левый и контент-правый DIVS.
добавлено автор Billy Moat, источник
@raul Я считаю, что работает только в том случае, если вы используете flexbox. Если вы используете float в div col - * , это не сработает.
добавлено автор Jacob Stamm, источник
Проблема будет возникать, если содержимое правого выше, чем левое. В этом случае вертикальная линия будет уродливой.
добавлено автор lvarayut, источник

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: -100px;
  border-left: 3px solid #F2F7F9;
  border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
  <div class="col-xs-6">Hi there</div>
  <div class="col-xs-6">Hi world
hi world</div> </div>
</div> </div>

24
добавлено
Это решение является лучшим
добавлено автор Wai Yan Hein, источник
фрагмент кода не показывает границу
добавлено автор eddie_cat, источник
Используйте селектор «+», и вам не нужны первый и последний дочерние классы: .row.vertical-divider div [class ^ = "col-"] + div [class ^ = "col-"] {text- align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid # 0396D1; }
добавлено автор Vasyl, источник

Ну вот еще один вариант, который я использовал в течение некоторого времени. Он отлично работает для меня, так как мне в основном нужно визуально отделить 2 колоса. И это также отзывчиво. Это означает, что если у меня есть столбцы рядом друг с другом в средних и больших размерах экрана, я бы использовал класс col-md-border , который спрячет разделитель на меньших размерах экрана.

<Сильный> CSS

@media (min-width: 992px) {
    .col-md-border:not(:last-child) {
        border-right: 1px solid #d7d7d7;
    }
    .col-md-border + .col-md-border {
        border-left: 1px solid #d7d7d7;
        margin-left: -1px;
    }
}

В scss вы можете генерировать все необходимые классы, вероятно, из этого:

scss:

@media(min-width: $screen-md-min) {
    .col-md-border {
        &:not(:last-child) {
            border-right: 1px solid #d7d7d7;
        }

        & + .col-md-border {
            border-left: 1px solid #d7d7d7;
            margin-left: -1px;
        }
    }
}

<Сильный> HTML:

<div class="row">
    <div class="col-md-6 col-md-border"></div>
    <div class="col-md-6 col-md-border"></div>
</div>  

Как это работает:

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

.col-md-border:not(:last-child) matches all but the last element before .row close and adds right border to it.

.col-md-border + .col-md-border matches the second div with the same class if these two are next to each other and adds left border and -1px negative margin. Negative margin is why it doesn't matter anymore which column has greater height and the separator will be 1px the same height as the highest column.

У него также есть некоторые проблемы ...

  1. Когда вы пытаетесь быть умным/ленивым и используете класс col-XX-X вместе с классами hidden-XX / visible-XX внутри того же элемента строки.
  2. Когда у вас много столбцов и нужна идеальная вещь. Поскольку он перемещает n-1 столбец 1px влево.

... Но, с другой стороны, это отзывчиво, отлично работает для простого html, и легко создавать эти классы для всех размеров экрана начальной загрузки.

11
добавлено

Чтобы устранить уродливый вид делителя слишком короткий, когда содержимое одного столбца выше, добавьте границы ко всем столбцам. Дайте каждой другой колонке отрицательный запас, чтобы компенсировать разницу в позиции.

Например, мои три класса столбцов:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

И HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Убедитесь, что вы используете #ddd, если хотите тот же цвет, что и горизонтальные разделители Bootstrap.

4
добавлено
Мне нравится это решение, но оно предназначено только для трех или более столбцов. Что делать, если вы хотите только два? У вас средний «.borders» div не будет там, чтобы корректировать поля.
добавлено автор Matthew Zackschewski, источник

Используйте это, 100% гарантируется: -

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}
3
добавлено

Я протестировал его. Он работает нормально.

.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    <div class="container">
      <div class="row vdivide">
        <div class="col-sm-3 text-center">

One

</div> <div class="col-sm-3 text-center">

Two

</div> <div class="col-sm-3 text-center">

Three

</div> <div class="col-sm-3 text-center">

Four

</div> </div> </div>
3
добавлено
Абсолютно совершенный и полностью отзывчивый - даже когда столбцы укладываются на более мелкие экраны, граница исчезает, как вам хотелось бы! Большое простое решение, спасибо! :)
добавлено автор rmcsharry, источник
не работает, правый разделитель все еще существует, посмотрите здесь: jsfiddle.net/k4uavbtz
добавлено автор Yevgeniy Afanasyev, источник
Работает для столбцов 3+. Когда используется только два столбца, разделитель следует за высотой левого столбца. Поэтому, если правый столбец длиннее, граница не будет достаточно высокой.
добавлено автор Matthew Zackschewski, источник
Работы, отлично по мере того, как они были использованы, также должны были объяснить, что вы сделали.
добавлено автор Zoe Lynn, источник

Если вы все еще ищете лучшее решение в 2018 году, я нашел способ, которым это отлично работает, если у вас есть хотя бы один бесплатный псевдоэлемент (:: after или :: before).

You just have to add class to your row like this: <div class="row vertical-divider ">

And add this to your CSS:

.row.vertical-divider [class*='col-']:not(:last-child)::after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

Any row with this class will now have vertical divider between all of the columns it contains...

You can see how this works in this example.

1
добавлено

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

CSS

.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}

HTML

  <div class="row-fluid" >
      <div class="span8 leftspan" >
      </div>

      <div class="span4 rightspan"  >
      </div>
 </div>

Попробуйте это, это работает для меня

0
добавлено
Это уродливо, когда 2 divs не имеют одинаковой высоты.
добавлено автор Alain Tiemblo, источник

Должен открыться в полной странице, чтобы увидеть границы!

Добавлены ограничения ширины носителя в CSS, поэтому нет никаких неприятных границ на стороне мобильного устройства. Надеюсь это поможет! Это изменит размер на длину самого длинного столбца. Протестировано на .col-md-4 и .col-md-6, и мое предположение совместимо с остальными. Однако никаких гарантий нет.

JSFiddle

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media(min-width: 992px) {
  .col-md-4:not(:first-child), 
  .col-md-6:not(:first-child) {
    border-left: 1px solid black;
  }
  .col-md-4:not(:last-child),
  .col-md-6:not(:last-child) {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  

.col-md-6


<div class="row text-center"> <div class="col-md-6 cols">

Enter some text here

</div> <div class="col-md-6 cols">

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

</div> </div>

.col-md-4

<div class="row text-center"> <div class="col-md-4 cols">

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

</div> <div class="col-md-4 cols">

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

</div> <div class="cols col-md-4 cols">

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

Enter some more text here

</div> </div> </div>
</div> </div>

0
добавлено

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

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>
.vhr{
  border-right: 1px solid #333;
  height:100%;
}
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)