Вертикальный разделитель между двумя столбцами в бутстрапе
Я использую twitter bootstrap и имею строку, которая имеет два столбца (span6). Как создать вертикальный разделитель между двумя пролетами.
Спасибо,
Муртаза
Ответы
Ответ 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;
}
