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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

.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<br/>hi world</div>
</div>

Ответ 3

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

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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

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

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

Ответ 7

Я тестировал его. Он отлично работает.

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

Ответ 8

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

Добавлены предложения ширины носителя в 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>

Ответ 9

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

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

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

Ответ 10

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

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>

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

Ответ 11

Решение исчезает <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

Ответ 12

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

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