使用 Foundation 5 的中心柱

Question

我在使用 Zurb Foundation 5 时遇到中心柱问题。 在我的测试页面上它不能正常工作http://rsketchbook.o12.pl/test/ 在 sn-p 上看起来不错。我不知道有什么区别，我的代码中缺少什么。 谁能告诉我为什么它在我的测试页上不起作用？

$(document).foundation();

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/RobotoLight.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/RobotoRegular.woff2') format('woff2');
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto Regular', sans-serif !important;
}
p,
em,
a {
  font-family: 'Roboto light', sans-serif !important;
}
@media only screen and (min-width: 58.75em) {
  body > header {
    background-image: url("https://static.pexels.com/photos/7217/landscape-mountains-clouds-trees.jpg");
    background-position: center center;
    height: 600px;
  }
  #nav-bar {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0% 0%;
    height: 84px;
    padding-top: 20px;
  }
  .line {
    height: 1px;
    background: white;
    transition: height 0.38s ease;
  }
  .menu-item:hover .line {
    height: 4px;
  }
  .menu-item:active .line {
    height: 4px;
  }
  .contain-to-grid,
  .top-bar,
  .top-bar-section ul li,
  .top-bar-section ul li:hover > a,
  .top-bar-section ul li:hover:not(.has-form) > a,
  .top-bar-section li:not(.has-form) a:not(.button),
  ul.right {
    background: none !important;
  }
  #right-nav > ul > li {
    padding-right: 25px;
  }
  .top-bar-section ul li a {
    padding: 0 !important;
  }
  #homepage-slogan {
    position: relative;
    padding-top: 260px;
  }
  #homepage-slogan h2 {
    font-size: 5em;
    font-weight: 700;
    line-height: 1.0;
  }
  #homepage-slogan hr {
    background: #000;
    border: none;
    height: 6px;
  }
  #homepage-slogan h2,
  #homepage-slogan p {
    color: #000;
    padding-right: 5rem;
  }
}
/* screen min-width: 58.75em  */

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/js/foundation.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/css/normalize.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation-essential/5.5.2/css/foundation.css" rel="stylesheet" />
<header>
  <div id="nav-bar" class="fixed">
    <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
          <li class="name">
            <h1><a href="#"><img src="#" alt="logo"></a></h1>

          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span></span></a>

          </li>
        </ul>
        <section id="right-nav" class="top-bar-section">
          <ul class="right">
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <a href="#">
                <div class="line"></div>
                Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
            <li class="menu-item">
              <div class="line"></div> <a href="#">Lorem ipsum</a>

            </li>
          </ul>
        </section>
      </nav>
    </div>
  </div>
  <section id="homepage-slogan">
    <div class="row">
      <div class="large-15 columns right">
        <h2 class="text-right">Lorem<br>ipsum lorem</h2>

        <hr>
        <div class="large-14 columns right text-right">
          <p>test test test test test test test test test test test test test test test test</p>
        </div>
      </div>
    </div>
  </section>
</header>
<div class="row">
  <div class="medium-13 medium-centered columns">
    <div class="medium-6 columns">
      <h3>Center this part</h3>

      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>
      </p>
    </div>
    <div class="medium-1 columns"></div>
    <div class="medium-6 columns end">
      <h3>And this in one row</h3>
      test test test test test test test test test test</div>
  </div>
</div>

Answer 1

2 件事 -

不确定它是否 100% 需要，但我总是按行 div 中的列换行，因此在居中的列内，包含行 div 中的 3 个子列。

另外，您只使用居中列内可用的 15 列中的 13 列，也许将子列更改为 medium-7 而不是 medium-6？

编辑 -

<div class="row">
  <div class="medium-13 medium-centered columns">
<div class="row">
    <div class="medium-7 columns">
      <h3>Center this part</h3>

      <p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        <br>
        <br>
      </p>
    </div>
    <div class="medium-1 columns"></div>
    <div class="medium-7 columns end">
      <h3>And this in one row</h3>
      test test test test test test test test test test</div>
</div>
  </div>
</div>