Zurb Foundation 网格或块网格不适用于垂直选项卡

Question

我有一组垂直选项卡，当我尝试嵌套在某些网格或块网格元素中时，一切似乎都溢出了元素

即 1,2,3 应该在下图的右边部分

<div class="row">
<div class="medium-8 columns">
    <ul class="tabs vertical" data-tab>
      <li class="tab-title active"><a href="#domainnames">Domain Names</a></li>
      <li class="tab-title"><a href="#webhosting">Web Hosting</a></li>
      <li class="tab-title"><a href="#businesshosting">Business Hosting</a></li>
      <li class="tab-title"><a href="#premiumservices">Premium Services</a></li>
    </ul>
    <div class="tabs-content">
      <div class="content active" id="domainnames">
        <div class="row">
          <div class="medium-12 columns">
            <h1>{$LANG.domaincheckerchoosedomain}</h1>
            <form method="post" action="{$systemsslurl}domainchecker.php">
                <div class="row collapse">
                  <div class="medium-9 columns">
                    <input type="text" name="domain" placeholder="{$LANG.domaincheckerdomainexample}">
                  </div>
                  <div class="medium-3 columns">
                    {if $condlinks.domainreg}<input type="submit" value="{$LANG.checkavailability}" class="button postfix" /> {/if}
                  </div>
                </div>
            </form>
          </div>
        </div>
      </div>
      <div class="content" id="webhosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="businesshosting">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="content" id="premiumservices">
        <ul class="small-block-grid-3">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

tabs vertical 和 tabs-content 获得了一些构建垂直导航结构的特殊属性。

选项卡 tabs vertical 得到了 width: 20% 和 float:left。

.small-block-grid-3 突破了这个浮动。

尝试：

@import "foundation";
.small-block-grid-3 {
margin-left: 20%;
& > li:nth-of-type(3n+1) {
    clear: none;
}
}

演示：http://sassmeister.com/gist/b3c63c443765c4b7ad56

更新

is this a similar issue with the standard grid?

不，我认为您应该能够在不进行修改的情况下使用标准网格：

<div aria-hidden="false" class="content active" id="panel21">
  <div class="row">
  <div class="small-3 columns">1</div>
  <div class="small-3 columns">2</div>
  <div class="small-3 columns">3</div>
</div>

演示：http://sassmeister.com/gist/29c180401ed433ff2d2d

Answer 2

标签内容div 垂直标签需要class 垂直

替换divclass="tabs-content"

与divclass="tabs-content vertical"

Zurb Foundation 网格或块网格不适用于垂直选项卡

Zurb Foundation grid or block grid not working with vertical tabs

html

grid

tabs

zurb-foundation

zurb-foundation-5