Как перекрывать столбцы в Bootstrap 3?

Я хотел бы создать одну строку с двумя перекрывающимися колоннами, как, что:Как перекрывать столбцы в Bootstrap 3?

.row 
    .col-sm-7 
    .col-sm-6

так, что шестой столбец сетки перекрыт.

Это частично можно с .col-sm-pull-1:

.row 
    .col-sm-6 
    .col-sm-6.col-sm-pull-1

, но 12-й столбец становится пустым. Я пробовал:

.row 
    .col-sm-6 
    .col-sm-7.col-sm-pull-1

но второй столбец перемещается в следующую строку.

Я нашел ответ для Bootstrap 2 (How to overlap columns using twitter bootstrap?). Возможно ли это с помощью Bootstrap 3?

источник

2015-11-14 d3m0n

ли вы имеете в виду «внахлест», как в линии разрыва? Позаботьтесь о том, чтобы создать jsfiddle, который воссоздает проблему? – turbopipp

Я не понимаю. сетка релаксации - только 12 столбцов .... почему 7 + 6? – scaisEdge

Я хотел бы добиться совпадения следующим образом: https://i-msdn.sec.s-msft.com/dynimg/IC554563.png – d3m0n

После просмотра вашего примера с изображением, я думаю, возможно, это то, что вы ищете. (Я сделал их перекрытия 2 колонки, потому что сконцентрируется лучше)

.blue{ 
 
    background-color: rgba(0,0,255,0.5);; 
 
} 
 
.row .red{ 
 
    background-color: rgba(255,0,0,0.5); 
 
    position: absolute; 
 
} 
 
.red, .blue { 
 
    height: 70px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="red col-xs-7"></div> 
 
     <div class="blue col-xs-7 col-xs-push-5"></div> 
 
    </div> 
 
</div>

источник

2015-11-15 11:17:27 turbopipp

Вам нужно поместить новый столбец под тем же самым div, что и тот, который вы хотите совместить.

Вот пример

<style> 
.first { 
background-color: #dedef8; 
border: solid black 1px; 
} 

.second { 
background-color: #dedef8; 
border: solid black 1px; 
} 
</style> 

<body> 
<div class="container"> 
    <div class="row"> 
    <div class="col-xs-7 first"> 
     <p>This is the first column</p> 

    <div class="col-xs-6 second"> 
     <p>This is the second </p> 
    </div> 
    </div>   
    </div> 
</div> 
</body>

Вот jfiddle пример: http://jsfiddle.net/NachoSupreme/o0fs78fv/

источник

2015-11-14 23:36:43 NachoSupreme

Вы частично правы. Включение - это форма перекрытия, но я ищу решения, в которых столбцы частично перекрываются. – d3m0n

Я думаю, что нашел ответ на вашу проблему в другом потоке. http://stackoverflow.com/questions/31121288/overlapping-rows-columns-using-bootstrap-grid проверить это – NachoSupreme

Fiddle Если вы хотите, чтобы перекрывать два столбца в одной строке, вы будете нуждаться в отрицательных полях. Загрузочные желоба/поля выкладываются с использованием положительных и отрицательных полей. Я бы рекомендовал идентификаторы для столбцов, а затем вы можете использовать z-index, если хотите один над другим. Итак, измените правое поле на первом и левом поле на втором.

margin-right: -5%; 
margin-left: -5%;

How the grid works - отличная ссылка для его построения.

источник

2015-11-15 01:15:29 1Bladesforhire

Как перекрывать столбцы в Bootstrap 3?

ответ

Смежные вопросы