使用 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，因此在居中的列内，连续包含 3 个子列 div。

此外，您只使用了居中列内可用的 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>

使用 Foundation 5 居中列

Center columns using Foundation 5

html

javascript

css

zurb-foundation

zurb-foundation-5