Question

使用Zurb Foundation 5我的中心列有问题。在我的测试页面上，它无法正常工作this document 在片段上它看起来不错。我不知道我的代码中有什么区别，缺少什么。谁能告诉我为什么它在我的测试页面上不起作用？

＆＃13;

$(document).foundation();

＆＃13;

@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  */

＆＃13;

<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>

＆＃13;

Answer 1

2件事 -

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

此外，您只使用居中列中可用的15列中的13列，可能会将子列更改为中7而不是中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的中心列

1 个答案: