html - zurb foundation 将一行分成两列

Question

已更新

<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 列设置为八列。我想将这个 div 分成 4 列，每列。第一列属于文本 Estimated Wait time，另一个下拉框应处理其余四列。我希望它在一行中呈现，但 Estimated Wait time 呈现在下拉框下方。我希望估计的等待时间 float 到列的左侧，然后下拉框 float 到列的右侧。

Answer 1

列类名可能应该使用最新的网格类名语法。 您需要指定屏幕尺寸和数量。

例如，改变这个:

class="main 4 columns"

对此:

class="main small-4 large-4 columns"

来源: http://foundation.zurb.com/docs/components/grid.html