我在浏览页面时遇到了很大困难： The layout
Basicaly我想在左边有几行，div中的内容有像这样的四四方方的设计。
然后在右边我想要三个看起来像在图片上的div。当您开始向下滚动时，右侧div-“组”应该跟随滚动。
*请注意，右侧div具有与左手div不同的大小。
*请注意，所有这些都应该在class =“container”中，而不是全宽。
我已尝试将cols放在cols ets中，并将右侧div“box”的词缀放入其中，但当我滚动或简单地调整页面大小时它就会中断...
根据要求，这是我迄今为止的代码。 （我只包括身体）
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张图像。
答案 0 :(得分：0)
您可以通过在{{1}旁边添加data-offset-bottom="x"来解决您的第二个问题（在小型设备上，右侧面板的底部不可见，因为它会崩溃到页脚。） } {}，data-offset-top="150"是页脚的高度。
您可能还需要设置百分比x来帮助。
如果您有工作代码的链接，我们可以看到正确的列随着词缀的激活而变大。
