Прикрепленный дизайн с независимыми колонками - Twitter bootstrap
У меня большие трудности с достижением этого взгляда на моей странице: макет
По сути, я хочу пару строк слева с содержимым в div, которое имеет квадратный дизайн, подобный этому.
Затем справа я хочу три div, которые выглядят как на картинке. Когда вы начнете прокручивать страницу вниз, правая "группа" должна следовать за прокруткой.
* Обратите внимание, что правые делители имеют РАЗЛИЧНЫЙ размер от левых.
* Обратите внимание, что все это должно быть внутри class="container", чтобы оно не было полной шириной.
Я пытался поместить столбцы в столбцы и аффикс для правых блоков "div", но он просто ломается, когда я прокручиваю или просто изменяю размер страницы...
По запросу вот код, который у меня есть. (Я включаю только тело)
HTML - генерирует довольно точное отображение страницы. Однако, когда аффикс повернут, правая панель внезапно "становится больше". Также на небольших устройствах нижняя часть правой панели не видна, так как она падает в нижний колонтитул. (Зависит от размера окна)
Я попытался сделать так, чтобы правая панель оказалась ниже "левых окон контента", когда устройство достаточно маленькое. Хотя это не работает идеально.
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="pbcontainer">
PBCONTAINER:
<div class="pbcontent">
<div class="caption">
<h3>Dimensioner</h3>
<form>
<div class="form-group">
<p>Bredd & Höjd</p>
<div class="input-group">
<input type="text" class="form-control" id="bredd" placeholder="Ange bredd i mm">
<input type="text" class="form-control" id="höjd" placeholder="Ange höjd i mm">
<span class="input-group-addon" id="basic-addon2">mm</span>
</div>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> Bredd för stor! - <a href="#">Varför?</a></div>
<div class="alert alert-warning" role="alert"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Motortypen du har valt orkar inte bära en såhär bredd rullgardin, vill du vi skall välja rätt åt dig? - <a href="#">Ja Tack!</a></div>
<div class="pbcontent">
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
<div class="pbcontent">
Hejhejhej jag ligger i pbcontent2:
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
Jag innehåller mycket content</br>
</div>
</div>
</div>
<!-- Rightside panel -->
<div class="col-md-3">
<div class="pbcontainer" data-spy="affix" data-offset-top="150" >
PBCONTAINER:
<div class="pbcontent">
<div class="caption">
<h3>Pris: 549kr</h3>
<p><b>Varav Tillval:</b>129kr</p>
<p>- Fjärrkontroll: 50kr</p>
<p>- Extra List: 25kr
<p><b>Slutpris </b>549kr</p>
<a href="#" class="btn btn-default" role="button">Rensa Konfiguration</a>
</div>
</div>
<div class="pbcontent">
<div class="caption">
<h3>Konfiguration</h3>
<p><b>Rullgardin: </b>2500mm x 1000mm</p>
<p><b>Tyg: </b>Carina Yellowgreen 40570-6979</p>
<p><b>Färg:</b>Grön</p>
<p><b>Egenskaper:</b>Translucent 30% (Genomskilnig)</p>
<a href="#" class="btn btn-default" role="button">Rensa Konfiguration</a>
</div>
</div>
<div class="pbcontent">
<div class="caption">
<h3>Frakt</h3>
<div class="form-group">
<p>Ange Postnummer</p>
<div class="input-group">
<input type="text" class="form-control" id="postalnumber" placeholder="Ex: 220 53">
</div>
</div>
<p><a href="#" class="btn btn-primary" role="button">Lägg till i kundkorg</a>
</div>
</div>
</div>
</div>
</div>
</div>
Интересный CSS здесь
@media (max-width: 990px){
.affix { /* change sidenav selector to match your layout */
position: static; /* removes the affix behaviour */
width: auto; /* customise as required */
top: 0; /* customise as required */
}
}
а также
.pbcontent {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
/* background-color: #fff;*/
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
word-wrap: break-word
}
.pbcontent > img,
.pbcontenta > img {
margin-right: auto;
margin-left: auto;
}
a.pbcontent:hover,
a.pbcontent:focus,
a.pbcontent.active {
border-color: #337ab7;
}
.pbcontent .caption {
padding: 9px;
/* color: #333; */
}
.pbcontainer {
display: block;
margin-bottom: 20px;
line-height: 1.42857143;
/* background-color: #fff;*/
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
}
В результате получается что-то вроде этого, к сожалению, я не могу добавить более двух изображений.
1 ответ
Вы можете решить вторую проблему (на небольших устройствах нижняя часть правой панели не видна, так как она падает в нижний колонтитул), добавив data-offset-bottom="x" рядом с вашим data-offset-top="150", с x быть высотой вашего нижнего колонтитула. Возможно, вам также потребуется установить процент max-height помогать.
Если у вас есть ссылка на ваш рабочий код, мы увидим, как увеличивается правый столбец при активации аффикса.