html - 响应网格中的空列？

Question

我正在尝试学习响应式网格，但很难掌握如何将元素放置在“列”中。我正在使用其中的 12 个，看起来像这里的那个:http://www.w3schools.com/css/css_rwd_mediaqueries.asp

例如，我想要一行，左侧是网站名称，右侧是导航栏:

<div class="row">   
   <div class="col-1">empty column acting as margin; do i need a div for this?</div>
   <div class="col-2" id="name">
       website name
   </div>
   <div class="col-4">another set of empty columns</div>
   <div class="col-4" id="navbar">
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
      <a href="page3.html">Page 3</a>
   </div>
   <div class="col-1">empty column as margin</div>
</div>

我怎样才能做到这一点？其中带有“空列”的 div 显然是错误的，但我不确定如何获得正确的宽度。上面的链接说每行的列数加起来应该是12；这是否意味着我也需要指定空列？

Answer 1

主流浏览器会忽略空 div 的宽度，避免这种行为的一种简单方法是向空 div 添加宽度。

<div>&nbsp;</div>