我正在创建一个网站来展示我的一些工作，当我将浏览器窗口调整到较小的尺寸时，我遇到网格崩溃的问题。
由于我一周前刚开始学习html和css，所以我仍然非常喜欢编码，所以我无法弄清楚如何修复它。我尝试了各种技术，我发现类似的问题，无济于事。哦，我正在使用bootstrap框架，如果这有帮助。这是html和css代码：
HTML：
<body>
<div class="container">
<!-- Header begin -->
<div class="row">
<div id="divider1a" class="span12">divider1a</div>
</div>
<div class="row">
<div id="divider1b" class="span12">divider1b</div>
</div>
<div class="row">
<div id="head" class="span12">
<div class="row">
<div id="logo" class="span4"><a href="index.html"><img src="images/Logo.png" width="305" height="100" /></a></div>
<div id="socialmedia" class="span8"><ul>
<li><img src="images/rss.png" width="48" height="48" /></li>
<li><a href="http://www.linkedin.com/profile/view?id=203116454&trk=tab_pro"><img src="images/linkedin.png" width="48" height="48" /></a></li>
<li><img src="images/vimeo.png" width="48" height="48" /></li>
<li><a href="https://www.youtube.com/user/burnwesten"><img src="images/youtube.png" width="48" height="48" /></a></li>
</ul></div>
<div id="navbar" class="span8"><ul>
<li><a href="about.html">About</a></li>
<li><a href="reel.html">Demo Reel</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul></div>
</div>
</div>
</div>
<!-- Header end -->
<!-- Middle begin -->
<div class="row">
<div id="divider2a" class="span12">divider2a</div>
</div>
<div class="row">
<div id="divider2b" class="span12">divider2b</div>
</div>
<div class="row">
<div id="imgbanner" class="span12"><img src="images/imgbanner_comingsoon.png" /></div>
</div>
<div class="row">
<div id="slidebanner" class="span12">
<div class="row">
<div id="arrowleft" class="span3"><img src="images/arrowleft_comingsoon.png" /></div>
<div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div>
<div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div>
<div id="imgslide" class="span2"><img src="images/imgsquare_comingsoon.png" /></div>
<div id="arrowright" class="span3"><img src="images/arrowright_comingsoon.png" /></div>
</div>
</div>
</div>
<div class="row">
<div id="divider3" class="span12">divider3</div>
</div>
<div class="row">
<div id="welcome-news" class="span12">
<div class="row">
<div id="welcome" class="span8"><h2>Name</h2>
<h2>Job title</h2>
<p>Welcome to my site!
Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur
vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing
te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset.
Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo,
maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis
posidonium ne, ex elit saperet qui.</p></div>
<div id="news" class="span4"><h3>Latest News</h3>
<h4>News Title</h4>
<p>Lorem ipsum dolor sit amet, option fabellas mel et, at has doctus noluisse ullamcorper, no facete probatus evertitur
vim. Est id mutat lobortis. Cu ius omnesque apeirian interesset. Quo putent consequuntur at. Mel soluta sadipscing
te. Ea sed impetus patrioque, sed inani vitae ea, sea ne labore prodesset.
Nam in ipsum detracto disputando, sea ei habeo aliquam scripserit, vide simul graeco pri eu. Unum possit ea duo,
maiorum partiendo has ut. Per tamquam omnesque cu. Sed veniam ancillae luptatum te. Sea repudiare euripidis
posidonium ne, ex elit saperet qui.</p>
<p>dd/mm/yy</p></div>
</div>
</div>
</div>
<!-- Middle end -->
<!-- Footer begin -->
<div class="row">
<div id="divider4" class="span12">divider4</div>
</div>
<div class="row">
<div id="copyright" class="span12"><p>Copyright note</p></div>
</div>
<!-- Footer end -->
</div> <!-- Container end -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
的CSS：
.container { backgound: #28383f;
margin: 0 auto;
width: 940px; }
#divider1a { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#divider1b { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#logo { background: #28383f;
color: white;
height: 105px;
width: 310px;
margin-right: 0px; }
#socialmedia { background: #28383f;
color: white;
height: 52.5px;
width: 630px;
margin-left: 0px; }
#navbar { background: #28383f;
color: white;
height: 52.5px;
width: 630px;
margin-left: 0px; }
#divider2a { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#divider2b { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#imgbanner { background: #051d32;
color: white;
height: 340px;
width: 940px;
margin-left: 30px; }
#slidebanner { background: #051d32;
height: 190px;
width: 940px;
margin-left: 30px;
margin-right: 0px; }
#arrowleft { background: #051d32;
color: white;
height: 190px;
width: 110px;
margin-left: 30px;
margin-right: 0px; }
#arrowright { background: #051d32;
color: white;
height: 190px;
width: 110px;
margin-right: 0px;
margin-left: 0px; }
#imgslide { background: #051d32;
color: white;
height: 170px;
width: 170px;
margin-left: 35px;
margin-right: 35px;
margin-top: 10px;
margin-bottom: 10px; }
#divider3 { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#welcome-news { margin-left: 120px;
margin-left: 30px; }
#welcome { background: #28383f ;
color: white;
height: 500px;
width: 630px; }
#news { background: #344349;
color: white;
height: 500px;
width: 310px;
margin-left: 0px;
margin-right: 30px; }
#divider4 { background: #051d32;
height: 10px;
width: 940px;
margin-left: 30px ;
margin-right: 0px ; }
#copyright { background: #051d32;
color: white;
height: 50px;
width: 940px;
margin-left: 30px; }
非常感谢任何帮助。
另外，你可能已经注意到在css代码中很多div都有一个margin-left：30px;页面没有正确居中，除非这些div由于某种原因具有30px左边距。因此，对该主题的任何帮助也会有所帮助。谢谢:)）
编辑*
以下是全屏浏览器的样子：
http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsfullscreen_zps57543528.png
当我调整窗口大小时会发生这种情况：
http://i1051.photobucket.com/albums/s426/AnimationStudent/breakingproblemsresized1_zps4a1d66a0.png
答案 0 :(得分：0)
很高兴看到你试图学习新事物。我建议您查看来自nettuts+等地方的教程以及其他一些内容，因为这会对deffo有所帮助。也总是试着提问，因为这是你学习的唯一真实方式。现在陷入困境;
现在在我看来，你正试图建立静态设计而不是响应式设计。无论在哪个屏幕上，我都假设你想让它看起来一样，所以试试
.container { backgound: #28383f;
margin: 0 auto;
min-width: 940px; !important}
因为这忽略了任何其他子规则（甚至是@media）。
如果你想要一个响应式设计，我可以建议避免使用固定宽度（像素）并向响应宽度（％）移动。
它可能也会发生的原因是因为你的代码会出现问题。我的意思是你在同一行有一个span4和两个span8。因此，当屏幕缩小时，可能会导致崩溃问题。至于中心问题......不确定，因为看不到一个工作实例，所以无法告诉你为什么在这个设计上会出现这种情况。
编辑*
根据您刚刚附上的图片，它似乎是一个不洁净且相当杂乱的设计。通过这个我的意思是我没有看到2 div的点和头div的顶部或底部。另外，为什么你指的是id而不是个人偏好的样式类我试图避免使用id，因为它们更适合于引用和样式类。