Как добавить строку между двумя столбцами, используя сетку Twitter Bootstraps

Ответ 1

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

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

Приведенный выше код должен вывести это изображение.

Ответ 2

Мое решение использует псевдоэлемент :before чтобы поместить позиционированный элемент между столбцами. Это не требует больше элементов HTML и будет применяться только к непосредственным дочерним элементам .col-* класса .border-between. Это должно быть применено к тому же элементу, что и .row.

HTML

<div class="row border-between">
  <p class="col-sm-6">This column does not have a border, because it a first child.</p>
  <p class="col-sm-6">This column has a border to the left</p>
</div>

CSS

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}

Ответ 3

Основываясь на решении @Ross Angus, я нашел способ адаптировать высоту. Просто размещая поверх всех границ каждой колонки.

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}

Ответ 4

Основываясь на этом ответе, который очень похож: fooobar.com/questions/117140/...

Я бы предложил 2 угла, чтобы атаковать эту проблему: границы или ряд строк. Вот демон demo (jsfiddle).

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

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

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }

Ответ 5

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

// See the rest on codepen.io
$(".border-bottom").children("div").matchHeight();

Ответ 6

Я думаю, вы можете установить левый столбец шириной 48%, справа - ширину 48% и центр 2% div с повторным фоном. Вы должны сами справиться с этим.

Ответ 7

Bootstrap 4 теперь поставляется с граничными служебными классами. Поэтому, если вы используете Bootstrap 4, вы можете просто использовать эти классы для столбцов, которые в них нуждаются. Например, если вы хотите установить границу между столбцом A и столбцом B, вы должны добавить класс border-right в столбец A.

Вот демо:

<link rel="stylesheet" href="#" onclick="location.href='https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css'; return false;" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="row text-center">
    <div class="col border-right">
      Column A
    </div>
    <div class="col">
      Column B
      <br>
      <br>
      <br>
      Additional content demonstrating that the border stretches to accommodate the height of both columns.
    </div>
  </div>
</div>