当更改互联网浏览器的大小时,一切似乎都是响应式的,直到达到特定的窗口大小。展开我的窗口时,我的网站的容器大小将从 (944px X 240px) 跳到 (463.5px x 289px)。请帮我弄清楚如何解决重叠问题!
这就是它在扩展时和重叠之前的样子:
这是它的样子,同时展开它,它会跳转到一个较小的容器并重叠:
如果我继续扩展它,容器会再次恢复到正常大小,并且响应能力再次看起来不错:
这是我的代码:
<div class="container-fluid">
<div class="row" style="margin-bottom: 15px;">
<div class="col-xs-12 col-md-6 col-md-offset-3" >
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3 col-sm-offset-1">
<img src="/assets/img/blank_avatar.jpg" style="width: 200px; height: 200px;" class="img-circle"/>
</div>
<div class="col-xs-12 col-sm-8">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h2>Title</h2>
<h4>Testing header here</h4>
<h4>Testing header here</h4>
</div>
<div class="col-xs-12 col-sm-6">
<ul>
<li>
<a href="#">
<span>Face</span>
<i class="icon-grin"></i>
</a>
</li>
<li>
<a href="#">
<span>Face</span>
<i class="icon-neutral"></i>
</a>
</li>
<li>
<a href="#">
<span>Star</span>
<i class="fa fa-star"></i>
</a>
</li>
</ul>
<a class="btn btn-default btn" href="#">
<i class="icon-neutral"></i>test
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>