Html Zurb基金会将一排分成两列

更新

半小时





估计等待时间


会议记录
由PLACEMETER实验室提供动力

我有一个有一排的容器。我将div列设置为8列。我想把这个div分成4列。第一列属于一个文本，只是

估计等待时间

，而另一个下拉框应该处理四列中的其余部分。我希望这是在一行中呈现的，但是

估计等待时间

是在下拉框下方呈现的。我希望估计的等待时间浮动到列的左侧，然后下拉框浮动到列的右侧

如果您检查上的文档，您会发现嵌套的列也应该包装在

行中

<div class="container">
      <div class="row">
        <div class="main 8 columns" >
          <div class="row">
            <div class="main 4 columns">
              <a href="#" class="button" data-dropdown="drop1">Has Dropdown</a>
                <ul id="drop1" class="f-dropdown" data-dropdown-content>
                  <li id="halfanhour">Half an Hour</li> <!-- in half an hour-->
                  <li><a href="#">This is another</a></li> <!-- in one hour -->
                  <li><a href="#">Yet another</a></li> <!-- in 1.5 hour -->
                  <li><a href="#">Yet another</a></li><!--in 2 hours-->
                  <li><a href="#">Yet another</a></li><!-- in 2.5 hours-->
                </ul>
            </div>
            <div class="main 4 columns">
              Estimated Wait Time
            </div>
          </div>
        </div>   
     </div>


    <div class="row">
        <div class="main eight columns">
            <div class="element">
                <div class="waittime">
                  <%= @shakelines['average_line_wait_secs'][0]%><br/>
                    <div class="minute">
                        Minutes
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="eight columns">
          <div class="footer">
              POWERED BY PLACEMETER LABS 
          </div>
        </div>
    </div>

</div>









估计等待时间
列类名称可能应该使用最新的网格类名语法。
您需要指定屏幕大小和数字

例如，更改此选项：

<div class="container">
    <div class="row">
        <div class="main eight columns" >
        <div class="row">
             <div class="main four columns">
               <a href="#" class="button" data-dropdown="drop1">Has Dropdown</a>
                 <ul id="drop1" class="f-dropdown" data-dropdown-content>
                  <li><a href="#">This is a link</a></li> <!-- in half an hour-->
                  <li><a href="#">This is another</a></li> <!-- in one hour -->
                  <li><a href="#">Yet another</a></li> <!-- in 1.5 hour -->
                  <li><a href="#">Yet another</a></li><!--in 2 hours-->
                  <li><a href="#">Yet another</a></li><!-- in 2.5 hours-->
                </ul>
                </div>
                <div class="main four columns">
                    Estimated Wait time
                </div>
        </div>     
        </div>   
     </div>
</div>

为此：

class="main 4 columns"

资料来源：
我希望在这里有一个结束div:
@BassJobsen我稍晚才发现，但没有帮助。我仔细检查了一下，但仍然不起作用。我更新了它，你能找出丢失的
？
class="main small-4 large-4 columns"