Основа структуры: мой код складывается вертикально, когда я думаю, что следовал примеру, чтобы заставить их укладывать горизонтально - PullRequest
Новая
       18

Основа структуры: мой код складывается вертикально, когда я думаю, что следовал примеру, чтобы заставить их укладывать горизонтально

0 голосов
/ 26 августа 2018

Я написал следующее для страницы в Foundation.Я переместил некоторые стандартные файлы и папки, отсюда и исправленные пути к файлам.

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../css/foundation.css">
    <link rel="stylesheet" href="../css/app.css">
  </head>
  <body>
    <!--
    <div class="row">
      <ul class="pagination" role="navigation">
        <li class="menu-text">Understood</li>
        <li class="disabled">First</li>
        <li class="disabled">Previous</li>
        <li class="disabled">Next</li>
        <li class="disabled">Last</li>
      </ul>
    </div>
    -->

    <div class="row">
      <div class="large-4 columns">
        <!--
        <ul class="menu vertical">
          <li><button class="button">Home</button></li>
          <li><button class="button">Map</button></li>
          <li><button class="button">1. Prehistory</button></li>
          <li><button class="button">2. Ancient</button></li>
          <li><button class="button">3. Classical</button></li>
        </ul>
        -->
        <p>First Bunch</p>
      </div>
      <div class="large-8 columns">
        <p>Text</p>
      </div>
    </div>

    <script src="../js/vendor/jquery.js"></script>
    <script src="../js/vendor/what-input.js"></script>
    <script src="../js/vendor/foundation.js"></script>
    <script src="../js/app.js"></script>
  </body>
</html>

Я оставил в некоторых комментариях, потому что, когда я рендерил код в комментариях, за исключением материала, который должен отображать столбцы, он работает.Тем не менее, я постепенно пытаюсь научиться создавать строки меню, и строка, содержащая столбцы, должна была стать первой попыткой - поэтому я хочу, чтобы первая строка <div class="large-4 columns"> содержала строку меню слева., а второй div содержит тело страницы.Однако, как и сейчас, это выглядит как

Первая группа

Текст

вместо размещения их в левом столбце и правом столбце.Насколько я могу судить, я правильно следую этим инструкциям:

https://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

Я также делаю это на своем настольном компьютере, поэтому я не думаю, что это должно касатьсяРазмер экрана как угодно, но не большой.Я использую последнюю версию Firefox на компьютере с Linux, чтобы просмотреть ее, и в консоли разработчика нет ошибок.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Ваш код кажется правильным по сравнению с базовой документацией, и я не смог найти другую документацию о реализации сетки для версии Foundation, которую вы, похоже, используете.

Что я могу подумать, если вы 'обязательно используйте ту же версию Foundation, что и ссылку, которой вы поделились (5.5.3).В последней версии документов говорится, что Foundation 6 поставляется с сеткой макетов, отключенной по умолчанию.Также рекомендуется использовать сетку XY, если вам не нужна поддержка IE 10.

Это будет выглядеть так: 

<div class="grid-x">
  <div class="cell large-4">First element</div>
  <div class="cell large-6">Next element</div>
</div>

Cheers,

0 голосов
/ 26 августа 2018

кажется, что ваш CSS-файл не загружается, попробуйте это <link rel="stylesheet" href="css/foundation.css" /> и удалите часть ../.

Я надеюсь, что это сработает: -)

С наилучшими пожеланиями, Георг

...