基础网格布局

Question

我很努力地使用下面的代码来分类布局。

 <div class="row"> 
     <div class="large-6 columns"> 
      <div class="row collapse"> 
       <label>Contigency</label> 
       <div class="small-9 columns"> 
        <input type="text" name="contingency"> 
       </div> 
       <div class="small-3 columns"> 
        <span class="postfix">%</span> 
       </div> 
      </div> 
     </div> 
     <div class="large-3 columns"> 
      <div class="row collapse"> 
       <label style="text-align:right;">Project Management</label> 
       <div class="small-2 columns"> 
        <span class="prefix">$</span> 
       </div> 
       <div class="small-10 columns"> 
        <input type="text" class="" name="project_management"> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="row"> 
    <div class="small-12 columns"> 
     <div class="row"> 
     <div class="small-8 columns"> 
      <label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label> 
     </div> 
     <div class="small-2 columns"> 
      <span class="prefix">$</span> 
     </div> 
     <div class="small-2 columns"> 
      <input type="text" name="project_management"> 
     </div> 
     </div> 
    </div> 
</div> 

它产生以下内容。

我试图排队与上面的一个（项目管理）下输入。

任何想法我错了？

感谢，

约翰

Answer 1

好了，约翰，

这是两件事情，首先你所有的底投入使用4列和顶部输入仅使用3列，其次你正在折叠你的第一排排水沟，但不会在第二排崩溃。

您有两行，并且在顶行内嵌套了较小的行。您没有在您创建的最后一行中嵌套任何较小的行。为了得到一个关于你的数学，第一个美元符号的容器实际上是1/3宽度（或1/18）的屏幕宽度的1/6，因为你在3/12中嵌套了2/12列柱。第二个美元符号位于屏幕宽度的1/6，因为它位于2/12列。最高美元符号不符合第二个美元符号的原因是由于排水沟增加了额外的宽度。

但是，这将让它看起来你怎么样：

<div class="row"> 
     <div class="large-6 columns"> 
      <div class="row collapse"> 
       <label>Contigency</label> 
       <div class="small-9 columns"> 
        <input type="text" name="contingency"> 
       </div> 
       <div class="small-3 columns"> 
        <span class="postfix">%</span> 
       </div> 
      </div> 
     </div> 
     <div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future --> 
      <div class="row collapse"> 
       <label style="text-align:right;">Project Management</label> 
       <div class="small-2 columns"> 
        <span class="prefix">$</span> 
       </div> 
       <div class="small-10 columns"> 
        <input type="text" class="" name="project_management"> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="row"> 
    <div class="large-9 columns"><!-- this row will take up nine columns --> 
     <div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row --> 
     <div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns --> 
      <label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label> 
     </div> 
     </div> 
    </div> 
    <div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row --> 
     <div class="row collapse"> 
     <div class="small-2 columns"> 
      <span class="prefix">$</span> 
     </div> 
     <div class="small-10 columns"> 
      <input type="text" name="project_management"> 
     </div> 
     </div> 
    </div> 
</div> 

给一个去，请务必仔细阅读我留在HTML解释一切的意见。但基本上你需要确保你使用相同数量的列，如果你想排列起来，并且如果你折叠一行，你需要折叠其他行来排列它。