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

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



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

1000   10  

10 ответов:

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

<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;
}
69  
2013-01-29 12:50:06 

.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>
24  
2014-10-28 03:41:16

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

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

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

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

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

12  
2016-05-04 19:50:33

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

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

.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  
2015-09-23 20:05:00

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

.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>
3  
2017-04-01 17:42:47

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

вам просто нужно добавить класс в свою строку следующим образом:<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;
}

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

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

2  
2018-08-20 19:27:39

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

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

.vhr{
  border-right: 1px solid #333;
  height:100%;
}
1  
2018-08-23 22:28:09

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

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  
2013-07-15 22:17:51

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

добавлены пункты ширины мультимедиа в 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>
0  
2018-02-16 17:35:00

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

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}
-3  
2014-07-28 00:49:31

Comments

    Ничего не найдено.
Click here to cancel reply.