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

Question 1

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

Спасибо, муртаза

Question 2

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

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

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

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

Question 3

.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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/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<br/>hi world</div>
</div>

Развернуть фрагмент

Question 4

В Bootstrap 4 есть служебный класс, border-rightкоторый вы можете использовать.

Так, например, вы можете:

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

Question 5

Что ж, вот еще один вариант, который я использую уже некоторое время. Он отлично работает для меня, поскольку мне больше всего нужно, чтобы он визуально разделял 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>

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

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

.col-md-border:not(:last-child)соответствует всем элементам, кроме последнего перед .row close, и добавляет к нему правую границу.

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

Тут тоже есть проблемы ...

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

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

Question 6

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

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

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

Question 7

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

Вам просто нужно добавить класс в свою строку следующим образом: <div class="row vertical-divider ">

И добавьте это в свой 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;
}

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

Вы можете увидеть, как это работает, на этом примере.

Question 8

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

class="col-6 border-left"

в один из ваших столбцов div-s

НО

В мире адаптивного дизайна вам, возможно, иногда придется заставить его исчезнуть.

Раствор исчезает <hr>+ исчезает <div>+margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

протестировано на Bootstrap 4.1

Question 9

Я это проверил. Работает нормально.

.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"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>

Question 10

С Bootstrap 4 вы можете использовать границы , избегая написания другого CSS.

граница слева

И если вам нужно пространство между содержимым и рамкой, вы можете использовать отступы . (в этом примере отступ слева 4 пикселя)

пл-4

Пример:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="offset-6 border-left pl-4">First</div>
      <div class="offset-6 border-left pl-4">Second</div>
    </div>

Развернуть фрагмент

Question 11

Необходимо открывать всю страницу, чтобы увидеть границы!

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

JSFiddle

.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">
  <h1>
    .col-md-6
  </h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6 cols">
      <p>Enter some text here</p>
    </div>
    <div class="col-md-6 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
  <hr>
  <h1>
    .col-md-4
  </h1>
  <div class="row text-center">
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="cols col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
</div>

Развернуть фрагмент

Question 12

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

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>

.vhr{
  border-right: 1px solid #333;
  height:100%;
}

Question 13

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

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>

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

Question 14

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

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}

Answer 1

86

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

Спасибо, муртаза

html css twitter-bootstrap муртаза52
источник

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

Росс Ангус

что такое (span6)?

Евгений Афанасьев

Answer 2

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

Росс Ангус

Answer 3

что такое (span6)?

Евгений Афанасьев

Answer 4

97

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

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

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

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

Билли Моут
источник

1

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

murtaza52

Просто - добавьте отступы к DIVS content-left и content-right.

Билли Моут

10

Проблема возникнет, если содержание правого <span>выше левого. В этом случае вертикальная линия будет некрасивой.

lvarayut

Если столбцы имеют разную высоту, вы можете заставить линию идти полностью вниз, установив min-height: 100%; height: 100%;в CSS для контейнера divи divs, содержащие каждый столбец.

Рауль

@raul Я считаю, что это работает, только если вы используете flexbox. Если вы используете float в col-*div, это не сработает.

Джейкоб Штамм

Answer 5

1

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

murtaza52

Answer 6

Просто - добавьте отступы к DIVS content-left и content-right.

Билли Моут

Answer 7

10

Проблема возникнет, если содержание правого <span>выше левого. В этом случае вертикальная линия будет некрасивой.

lvarayut

Answer 8

Если столбцы имеют разную высоту, вы можете заставить линию идти полностью вниз, установив min-height: 100%; height: 100%;в CSS для контейнера divи divs, содержащие каждый столбец.

Рауль

Answer 9

@raul Я считаю, что это работает, только если вы используете flexbox. Если вы используете float в col-*div, это не сработает.

Джейкоб Штамм

Answer 10

.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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/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<br/>hi world</div>
</div>

Развернуть фрагмент

Answer 11

1

Используйте селектор '+', и вам не нужны первый и последний дочерние классы:

.row.vertical-divider div[class^="col-"] + div[class^="col-"] {     text-align: center;     padding-bottom: 100px;     margin-bottom: -100px;      border-left: 3px solid #0396D1;    }

Василий

Answer 12

1

Это лучшее решение

Вай Янь Хейн

Answer 13

В Bootstrap 4 есть служебный класс, border-rightкоторый вы можете использовать.

Так, например, вы можете:

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

Answer 14

Что ж, вот еще один вариант, который я использую уже некоторое время. Он отлично работает для меня, поскольку мне больше всего нужно, чтобы он визуально разделял 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>

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

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

.col-md-border:not(:last-child)соответствует всем элементам, кроме последнего перед .row close, и добавляет к нему правую границу.

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

Тут тоже есть проблемы ...

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

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

Answer 15

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

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

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

Answer 16

Мне нравится это решение, но оно рассчитано всего на три или более столбцов. Что, если вам нужно только два? Ваш средний div ".borders" не предназначен для корректировки полей.

Мэтью Закшевски

Answer 17

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

Вам просто нужно добавить класс в свою строку следующим образом: <div class="row vertical-divider ">

И добавьте это в свой 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;
}

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

Вы можете увидеть, как это работает, на этом примере.

Answer 18

1

Опустите - в [class * = 'col-'] (to [class * = 'col']) для совместимости bootstrap 4 с классом «col»

Трей Диблер,

Answer 19

просто комментарий «Свойство игнорируется из-за отображения. С 'display: inline' свойства width, height, margin-top, margin-bottom и float не имеют никакого эффекта. css»

Шуджа Ахмед

Answer 20

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

class="col-6 border-left"

в один из ваших столбцов div-s

НО

В мире адаптивного дизайна вам, возможно, иногда придется заставить его исчезнуть.

Раствор исчезает <hr>+ исчезает <div>+margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

протестировано на Bootstrap 4.1

Answer 21

4

Я это проверил. Работает нормально.

.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"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>

Чиранджит Гош
источник

1

Работает, как и нужно, также должно было объяснить, что вы сделали.

Атик М.

Абсолютно идеально и полностью реагирует - даже когда столбцы складываются на экранах меньшего размера, граница исчезает, как вы и хотели бы! Отличное простое решение, спасибо! :)

rmcsharry 08

1

не работает, правый разделитель все еще там, посмотрите здесь: jsfiddle.net/k4uavbtz

Евгений Афанасьев

Работает для 3+ столбцов. Когда используются только два столбца, разделитель соответствует высоте левого столбца. Следовательно, если правый столбец длиннее, граница будет недостаточно высокой.

Мэтью Закшевски

Answer 22

1

Работает, как и нужно, также должно было объяснить, что вы сделали.

Атик М.

Answer 23

Абсолютно идеально и полностью реагирует - даже когда столбцы складываются на экранах меньшего размера, граница исчезает, как вы и хотели бы! Отличное простое решение, спасибо! :)

rmcsharry 08

Answer 24

1

не работает, правый разделитель все еще там, посмотрите здесь: jsfiddle.net/k4uavbtz

Евгений Афанасьев

Answer 25

Работает для 3+ столбцов. Когда используются только два столбца, разделитель соответствует высоте левого столбца. Следовательно, если правый столбец длиннее, граница будет недостаточно высокой.

Мэтью Закшевски

Answer 26

С Bootstrap 4 вы можете использовать границы , избегая написания другого CSS.

граница слева

И если вам нужно пространство между содержимым и рамкой, вы можете использовать отступы . (в этом примере отступ слева 4 пикселя)

пл-4

Пример:

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="offset-6 border-left pl-4">First</div>
      <div class="offset-6 border-left pl-4">Second</div>
    </div>

Развернуть фрагмент

Answer 27

Необходимо открывать всю страницу, чтобы увидеть границы!

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

JSFiddle

.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">
  <h1>
    .col-md-6
  </h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6 cols">
      <p>Enter some text here</p>
    </div>
    <div class="col-md-6 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
  <hr>
  <h1>
    .col-md-4
  </h1>
  <div class="row text-center">
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="cols col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
</div>

Развернуть фрагмент

Answer 28

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

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>

.vhr{
  border-right: 1px solid #333;
  height:100%;
}

Answer 29

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

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>

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

Answer 30

1

Это уродливо, когда два div не имеют одинаковой высоты.

Ален Тьембло

Answer 31

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

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}

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

Ответы:

Необходимо открывать всю страницу, чтобы увидеть границы!