使用Foundation 5居中列

Question

我有一个使用Zurb Foundation 5的中心列的问题。在我的测试页面上，它不能正常工作http://rsketchbook.o12.pl/test/在代码片段上看起来不错。我不知道有什么不同，我的代码中缺少了什么。谁能告诉我为什么它不工作在我的测试页面?

$(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个子列。

此外，您只使用13个可用的15列在居中列内，也许将子列改为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>