Вот мой html, я использую версию SCSS:
<!doctype html>
<html class="no-js" lang="en" dir="rtl">
<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 here</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Вот что я получаю:
ОБНОВЛЕНИЕ (уточнение):
когда я проверяю элементы, у них нет определения класса строки/столбца, и они вообще не центрированы.
Что я делаю не так?
Примечание. Я использую настройки rtl. Я проверил, не сломалось ли что-нибудь, но это все равно не сработало.
.rowтеперь.grid-xи.columns=.cell, взгляните на foundation.zurb.com/sites/docs/xy-grid.html 28.09.2017