У меня возникают большие трудности с достижением этого взгляда на мою страницу: The layoutПрикрепленный дизайн с независимыми столбцами - Twitter Bootstrap
Basicaly Я хочу пару строк на левой с содержанием в дивы, которые имеют квадратное-дизайн как это.
Тогда справа я хочу три divs, которые выглядят как на картинке. Когда вы начинаете прокрутку вниз, справа-div-«группа» должна следовать вниз с помощью прокрутки.
* Обратите внимание, что правые-divs имеют РАЗЛИЧНЫЙ размер в левой части div.
* Обратите внимание, что все это должно быть внутри класса = "контейнер" не для полной ширины.
Я попытался размещения COLS в Cols ЭТС и аффикс для правой 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;
}
Это приводит к чему-то вроде этого, я не могу добавить больше чем 2 изображения к сожалению.
